일반적인 CSS 디자인 문제 해결: 페이지 또는 콘텐츠 하단 중 더 낮은 바닥글 배치

이것은 웹 개발에서 흔히 발생하는 잔소리 중 하나이며 이전에 여러 번 해결했지만 여전히 Google과 스택 오버플로를 만날 때마다 청소해야 합니다. 그래서 이 간단한 기사에서 이에 대한 간단한 솔루션을 문서화하기로 결정했습니다.

바닥글 div를 페이지 하단에 배치하고 고정하면(position:fixed, bottom:0, width:100%) 짧은 콘텐츠 페이지(스크롤할 필요가 없음)에서 잘 작동합니다. 그러나 문제는 더 긴 페이지에서도 콘텐츠 하단으로 이동하는 대신 바보처럼 뷰포트 하단에 고정된다는 것입니다!



위의 상황은 콘텐츠 성장을 시뮬레이션하기 위해 여러 "lorem ipsum"블록(<p> 요소)이 배치된 this fiddle에서 실제로 볼 수 있습니다. 콘텐츠가 짧을 때(단지 1-2개의 "lorem ipsum"블록) 바닥글이 완벽하게 작동하지만 블록을 계속 추가하면 바닥글이 뷰포트 하단에 고정되어 뷰포트 높이를 넘어 확장됩니다!

반면에 바닥글을 배치하는 대신 그대로 두는 경우(코더의 약 90%가 초기에 수행함) 또 다른 문제가 발생합니다. 이제 바닥글은 스크롤해야 하는 긴 콘텐츠 페이지에 올바르게 배치되지만 짧은 페이지에서는 this fiddle에 표시된 것처럼 콘텐츠가 끝나는 페이지 중간에 바닥글이 표시됩니다.



이 문제를 해결하기 위한 여러 접근 방식이 있을 수 있습니다. 나는 개인적으로 매우 간단하고 이해하기 쉬운 구식 방법을 선호합니다. 게다가 바닥글 위에 "#offset"또는 "#placeholder"와 같은 빈 HTML 요소를 추가할 필요가 없습니다. 필요한 것은 바닥글 위의 모든 HTML 요소가 하나의 컨테이너 div 요소 안에 래핑되어야 한다는 것입니다. 따라서 본체는 다음과 같이 구성되어야 합니다.

HTML
..BODY
....div.container
......header1,
......article1,
........p,
......etc, etc.
....footer

그런 다음 div.container의 최소 높이를 뷰포트 높이에서 바닥글 높이를 뺀 값으로 설정하기만 하면 됩니다. 바닥글의 높이가 55px라고 가정하면 다음과 같이 하면 됩니다.

div.container {
    min-height: calc(100vh - 55px);
}

this fiddle에서 이에 대한 작업 데모를 볼 수 있습니다. 점점 더 많은 "lorem ipsum"단락 요소를 추가하기 시작하더라도 바닥글은 다른 요소의 위치 및 콘텐츠 크기에 관계없이 항상 "올바른"위치에 배치됩니다! 이것은 "제대로 배치된 바닥글"이라고 부르는 것입니다.