개발 무지렁이

[CSS] vh와 푸터(footer) 본문

Frontend/CSS

[CSS] vh와 푸터(footer)

Gaejirang-e 2023. 4. 12. 20:40

vh (view height)

보여주는 크기만큼 꽉차게

💡 min-height: 100vh?

화면높이와 같거나 크도록
(더 늘어날 여지가 있다)

[index.html]

  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>  

  <div id="container">
    <nav id="navbar">
      <ul>
        <li class="nav-item">1차메뉴아이템 1</li>
        <li class="nav-item">1차메뉴아이템 2</li>
        <li class="nav-item">1차메뉴아이템 3</li>
      </ul>  
    </nav>  

    <div id="main">
      메인
    </div>

    <footer>
      <ul>
          <li></li>
          <li></li>
      </ul>  
    </footer>  
  </div>

[style.css]

  #container {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
  }

  #main {
      flex-grow: 1;
  }
📌 푸터(footer)

: footer는 화면 밑에 딱 붙어야 한다. (main content의 크기와 상관없이)
최소높이를 화면높이만큼 설정해놓고, main을 flex-grow로 커질수 있는만큼 커지게 하면
메인의 크기가 얼마큼이던 footer는 항상 화면 밑에 붙는다.

'Frontend > CSS' 카테고리의 다른 글

[CSS] nth-child()  (0) 2022.12.05
[CSS] display 속성 정리  (0) 2022.12.05
[CSS] position  (0) 2022.11.26
'Frontend/CSS' Related Articles more
Comments