footer 하단 고정

Gomi·2021년 11월 28일

항상 html 작성할때마다 footer가 날 괴롭힌다.
이상하게 구글링을 할 때 마다 나오는 자료들이 2% ~~아니 한 50% 이상~~ 모자라다.
컨텐츠 길이가 변할 때 마다 달라지는 화면 구성을 footer에 적용할 방법을 제대로
설명하는 글이 이상하게 없다.
조금더 컴팩트한 방법이 있어 작성한다.

구글링으로 나오는 자료들은 대부분 두 가지이다. 포지션만 조정하는 1, 2의 방법.

1. position : absolute

footer 태그에 다음 포지션을 부여하면

position : absolute;
bottom : 0;

브라우저 최하단에 박힌다.
이 방법의 문제점은 콘텐츠가 길어져 스크롤이 생기면 컨텐츠의 최하단에 박히지 않는다는 것이다.
(부모 요소를 아주 쌩까기 때문에)

2. position : fixed

position : fixed;
bottom : 0;

이 방식으로 설명하는 사람들은 자기 블로그도 이런 방식으로 구성했으면 좋겠다.
컨텐츠가 스크롤이 없을 정도로 짧다면 정상 작동하는것 처럼 보이나,
컨텐츠가 길어지면 스크롤에 관계없이 항상 자기 브라우저 하단에(뷰 포트 기준) 떡하니 footer가 박힌다.
가끔 보면 nav가 상단에 고정되는 페이지도 있지만, 누가 footer를 상시 보려고
페이지에 들어오나....?

이상하게도 구글링을 해도 잘 나오지 않던 컴팩트한 방법은 다음과 같다.

3. 콘텐츠 길이에 상관없이 하단 고정

우선 다음과 같은 상황에서,

<div id='wrapper'>
  <div>
    content
  </div>
</div>
<footer></footer>

#wrapper{
  height : 100%;
}
footer{
  position : relative;
  transform : translateY(-100%);
}

div 내 컨텐츠가 짧아 스크롤이 발생하지 않는다면
wrapper를 통해 강제로 컨텐츠 길이를 늘이고, 그 아래에 footer를 박는다.
다만 이 경우 footer의 높이만큼 overflow가 발생하기 때문에 스크롤이 footer높이만큼 발생하는데,
<transform : translateY(-100%);> 를 통해 footer의 높이만큼 footer를 강제로 올려치기하여 해결한다.

저 코드를 그대로 적용할 경우 position : absolute와 거의 같은 효과를 내는데,
컨텐츠 길이가 길어 스크롤이 발생할 때 똑같이 문제가 된다.(콘텐츠를 가린다.)
그래서 wrapper의 높이를 다음과 같이 수정한다.

#wrapper{
  height : auto;
  min-height: 100%;
}

상기한 코드에서는 wrapper내 콘텐츠가 짧다면 min-height가 적용되어 문제가 없고,
콘텐츠가 길어서 스크롤이 발생할 때는 그에 맞게 height를 자동으로 늘려준다.

하지만 스크롤 발생 시 혹은 컨텐츠가 화면에 꽉 찬 경우 <transform : translateY(-100%);>에 의해 하단 화면의 일부를 가리게 되는데, padding-bottom으로 화면의 아랫단을 미리 비워서 해결할 수 있다.

따라서 이 모든게 적용되어,

컨텐츠 길이에 상관없이 화면 하단을 footer로 여백없이 고정 시키는 방법은
다음과 같다.

HTML

<div id='wrapper'>
  <div>
    content
  </div>
</div>
<footer></footer>

CSS

#wrapper{
  height: auto;
  min-height: 100%;
  padding-bottom: (footer높이);
}
footer{
  height: (footer높이);
  position : relative;
  transform : translateY(-100%);
}