현이의 개발 이야기

Footer를 페이지 하단에 고정하는 법

웹2025. 04. 22. 02:41

대부분의 웹페이지는 Footer가 있으며, 페이지 내용의 길이에 상관 없이 하단에 고정되어 있다.

구글 홈페이지의 Footer도 하단에 고정되어 있다

내용이 짧으면 알아서 페이지의 하단에 붙고, 내용이 길다면 스크롤해야 보이는 Footer를 만들어보자.

페이지 준비

우선 다음과 같이 간단한 페이지 구조를 만들었다.

<body>
  <header class="header">Header</header>
  <div class="content">
  Content
  </div>
  <footer class="footer">Footer</footer>
</body>

body {
  margin: 0;
}

.header {
  background-color: yellow;
}

.content {
  background-color: green;
}

.footer {
  background-color: skyblue;
}

Header, Content, Footer를 색으로 구분하였다.

실제 웹페이지에서는 Content 안에 내용이 들어가게 될 것이다.

기본 페이지 구조

내용이 짧아 Footer가 위로 붙어있는 모습을 확인할 수 있다.

조건

Footer가 페이지 하단에 고정되기 위해서는 다음의 조건을 만족해야 한다.

내용이 짧을 때는 Content가 길어져야 한다.
1. 단, 페이지를 넘어가게 길어져서는 안된다.
내용이 길 때에는 Content가 내용에 맞는 높이만큼 사용해야 한다.

즉, Content의 높이가 Footer를 하단에 고정하는 데 핵심이라고 할 수 있다.

구현

우선, body가 차지하는 높이 자체를 늘려 주어야 한다.

그래야 Content도 그 안에서 원하는 만큼 길이를 가질 수 있을 것이다.

최소 높이, 즉 min-height를 활용하면 내용이 짧을 때에만 효과를 낼 수 있을 것이다.

body {
  margin: 0;
  min-height: 100vh;
}

그 다음, Content가 body에서 남는 공간을 전부 차지하도록 해야 한다.

이를 위해 body는 flex로 설정하고, Content에는 flex-grow: 1을 준다.

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  background-color: green;
  flex-grow: 1;
}

이렇게만 하면 끝이다.

결과

Footer가 하단에 고정되었다

내용이 짧을 때, Content가 늘어나 Footer가 하단에 고정된 것을 볼 수 있다.

스크롤바 또한 생기지 않는다.

내용이 긴 경우 - 상단

내용이 길어 페이지를 넘어갈 경우, 정상적으로 스크롤바가 생겨 Footer는 페이지 아래로 밀려난다.

내용이 긴 경우 - 하단

스크롤을 아래로 내려보면, Footer가 내용을 가리거나 하는 것 없이 하단에 잘 보여지고 있는 모습도 확인할 수 있다.

<body>
  <header class="header">Header</header>
  <div class="content">
  Content
  </div>
  <footer class="footer">Footer</footer>
</body>

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: yellow;
}

.content {
  background-color: green;
  flex-grow: 1;
}

.footer {
  background-color: skyblue;
}

이전 포스트이미지 hover 시 오버레이 보여주기

로그인이 필요합니다.

로그인