footer 하단 고정

Gomi·2021년 11월 28일
57
post-thumbnail

항상 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%);
}






본 컨텐츠는 Youtube Rock's Easyweb님의
CSS3 - 87 [ Fixed Footer ] 콘텐츠 양이 짧아도 하단에 푸터 고정하기 2가지 방법, position 활용, Fixed 활용하기
를 바탕으로 작성됨

profile
터키어 배운 롤 덕후

9개의 댓글

comment-user-thumbnail
2021년 12월 24일

'3. 콘텐츠 길이에 상관없이 하단 고정'이라는 말이 스크롤을 쭉 내렸을때 본문이 끝나고 난 이후 가장 아래쪽에 고정시킨다는 말씀이시죠? 마치 이 velog의 맨 밑에 있는 '관심 있을 만한 포스트' 처럼요? 그리고 제 벨로그에 링크 걸어놔도 될까요 :D?

1개의 답글
comment-user-thumbnail
2022년 2월 28일

와 계속 끙끙댔는데.. 덕분에 해결했습니다! 감사합니다!

1개의 답글
comment-user-thumbnail
2022년 3월 17일

도움 많이 됐어요!

1개의 답글
comment-user-thumbnail
2022년 8월 1일

우와 너무 쉽고 간편하게 해결했어요! 감사합니다

답글 달기
comment-user-thumbnail
2023년 5월 24일

와... 최고네요. 감사합니다!!!!! 거의 1주일동안 해결 안됐던 것 같아요.

답글 달기
comment-user-thumbnail
2023년 9월 26일

너무 감사합니다!

답글 달기