웹사이트를 제작하면 Header, Container, Footer 영역으로 크게 나누곤 한다.
.footer 에 position: absolute;
bottom: 0;
와 상위 .wrap 에 position: relative;
를 줬는데도 화면 최하단으로 내려가지 않는 경우가 있다.
(보라색의 .footer 영역)
개발자도구로 확인해보면 상위 div 가 화면 100% 채우지 않아서 상위 div 의 제일 하단에 내려가도, 화면의 제일 아래로 내려가지는 않는 것이다.
(html 영역이 컨텐츠가 없어 높이가 화면 전체보다 모자라다.)
그러므로 html 의 영역을 화면 전체에 100%로 잡히도록 하여, .footer 를 position: absolute;
과 bottom: 0;
속성을 이용해 html 가장 아래로 내려주자.
현재 나의 페이지는
html > body > div(#root) > div > div(.wrap) > div(.footer)
으로 이루어져있다.
그렇다면 html 부터 시작해서 .footer 위까지
height: 100%;
로 잡아주자.
다른 블로그에서는 .wrap 은 min-height: 100%;
로 잡아주어야 창의 높이를 낮췄을때 .footer 가 .wrap 중앙에 오지않는다고 한다.
나의 경우에는 height: 100%;
와 min-height:100%;
는 차이는 없었다.
그리고 footer 영역의 position: absolute;
의 기준을 잡아주기 위해
.footer 를 감싸고 있는 .wrap 에 position: relative;
를 주자.
body {
height: 100%;
}
#root {
height: 100%;
}
#root > div {
height: 100%;
}
#root > div > .wrap {
min-height: 100%;
position: relative;
}
그리고 .footer 에는 최하단으로 내리는 코드를 넣어주자.
position: absolute;
bottom: 0;
컨텐츠에 내용이 없음에도 .footer 가 브라우저 최하단으로 내려왔다.
컨텐츠에 내용이 없으므로 창의 크기를 줄이면 .container 영역이 줄어들면서 창이 줄어든다. .footer 는 그대로 브라우저 제일 하단에 위치하고 있다.
다른 방법으로 .footer 에 posiotion:fixed;
를 주는 방법이 있는데, 해당 방법은 컨텐츠가 브라우저 아래까지 더 길게 있어도 .footer 가 항상 visual viewport(유저가 보는 화면영역) 제일 하단에 위치한다.
즉 웹사이트가 아래로 스크롤이 길게 있어도 스크롤이 위에 있든 아래에 있는 현재 브라우저 위치의 제일 하단에 위치하면서 현재 내용을 덮어서 위에 위치하고 있다.
모바일 환경에서 적절하게 쓰일 수 있으나, 화면이 작은 PC 의 경우에는 화면을 답답하게 보이게 할 수 있으므로 디자인과 내용을 고려해서 사용해야 한다.
.footer 보다는 접근이 쉬워야하는 메뉴에 좀 더 적절하게 쓰일 수 있다.