시맨틱 마크업을 위해 각 페이지의 최상위 엘리먼트로 <main> 태그를 사용했다.
구조는 아래와 같다.
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>1. position: fixed의 문제점
body: {
position: relative;
}
main {
height: auto;
}
footer {
position: fixed;
bottom: 0;
}
위와 같이 CSS코드를 작성할 경우, 페이지 내용물이 길어 스크롤이 생겼을 때 이미지처럼 footer가 페이지 최하단에 고정되지 않고 스크롤을 따라다니는 것을 확인할 수 있다.
2. position: absolute의 문제점
body: {
position: relative;
}
main {
height: auto;
}
footer {
position: absolute;
bottom: 0;
}
position:absolute 를 사용할 경우, <main>에 들어가는 내용물의 길이가 충분하다면 페이지 하단에 고정된 것 처럼 보인다.
하지만 위 이미지처럼 내용물의 길이가 짧을 경우 푸터가 페이지 중간에 올라붙은 것을 확인할 수 있다.
만약 <main> 태그에 min-height 속성을 사용해 임의로 길이를 늘리더라도, 모니터 해상도나 페이지 확대/축소 여부에 따라 다르게 보일 수 있기 때문에 적절하지 않다.
3. 최종 해결 방법
body {
position: relative;
}
main {
height: auto;
min-height: calc(100vh - 5rem - 8rem);
/* 100% - 헤더높이 - 푸터높이 */
}
header {
height: 5rem;
}
footer {
width: 100%;
height: 8rem;
position: relative;
} 가장 간단한 해결 방법은 <main>태그의 min-height속성에 calc를 사용하는 것이다.
100vh(뷰포트 높이 100%)에서 지정된 헤더와 푸터의 height을 빼주면 모니터 해상도, 페이지 확대/축소 여부와 관계 없이 푸터가 하단에 고정된다.
