고정된 푸터

이 페이지의 내용을 가리는 아래의 버튼을 눌러보십시오. 그리고 페이지가 내용으로 가득차있지 않음에도 불구하고 푸터(Footer)가 창의 하단에 고정되는 것을 확인하십시오.

페이지의 내용이 부족할 때 푸터를 하단에 고정시키는 것은 모든 웹 개발자가 한 번 쯤은 해보았을만한 것입니다. 그리고, 대부분의 경우 그 문제를 해결했을 것입니다. 그러나 기존에 존재하던 해결방법은 푸터의 높이를 모를 경우 쓸 수 없다는 심각한 단점이 있습니다.

Flexbox는 이러한 유형의 문제에 대한 완벽한 해답입니다. Flexbox는 내용을 수평 방향으로 배치하는데에 좋다고 알려져있지만, 실제로는 수직적인 레이아웃 문제를 위해서도 좋습니다. 해야할 일은 그저 수직적인 섹션들을 Flex 컨테이너로 감싸고, 확장할 섹션을 선택하기만 하면 됩니다. 그러면 섹션들은 자동적으로 컨테이너의 빈 공간을 채우게 될 것입니다.

아래의 예제에서는, 컨테이너가 브라우저 창의 크기로 설정되고, 내용 영역은 필요한 만큼 확장됩니다. (주의: 수직 방향에서는 컨테이너의 높이를 지정해야합니다. 자동적으로 확장되는 수평 방향과는 다릅니다.)

HTML

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

CSS

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

이 데모에서 Site 컴포넌트를 위해 사용된 모든 소스 코드는 GitHub에서 보실 수 있습니다.