Footer 가 화면에 제일 아래로 내려가지 않을 때

승우·2022년 6월 23일
0

웹개발

목록 보기
1/1

웹사이트를 제작하면 Header, Container, Footer 영역으로 크게 나누곤 한다.

.footerposition: absolute; bottom: 0; 와 상위 .wrapposition: relative; 를 줬는데도 화면 최하단으로 내려가지 않는 경우가 있다.


(보라색의 .footer 영역)

개발자도구로 확인해보면 상위 div 가 화면 100% 채우지 않아서 상위 div 의 제일 하단에 내려가도, 화면의 제일 아래로 내려가지는 않는 것이다.


(html 영역이 컨텐츠가 없어 높이가 화면 전체보다 모자라다.)

그러므로 html 의 영역을 화면 전체에 100%로 잡히도록 하여, .footerposition: absolute;bottom: 0; 속성을 이용해 html 가장 아래로 내려주자.

현재 나의 페이지는
html > body > div(#root) > div > div(.wrap) > div(.footer)
으로 이루어져있다.

그렇다면 html 부터 시작해서 .footer 위까지
height: 100%; 로 잡아주자.
다른 블로그에서는 .wrapmin-height: 100%; 로 잡아주어야 창의 높이를 낮췄을때 .footer.wrap 중앙에 오지않는다고 한다.
나의 경우에는 height: 100%;min-height:100%; 는 차이는 없었다.

그리고 footer 영역의 position: absolute; 의 기준을 잡아주기 위해
.footer 를 감싸고 있는 .wrapposition: 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 는 그대로 브라우저 제일 하단에 위치하고 있다.

다른 방법으로 .footerposiotion:fixed; 를 주는 방법이 있는데, 해당 방법은 컨텐츠가 브라우저 아래까지 더 길게 있어도 .footer 가 항상 visual viewport(유저가 보는 화면영역) 제일 하단에 위치한다.

즉 웹사이트가 아래로 스크롤이 길게 있어도 스크롤이 위에 있든 아래에 있는 현재 브라우저 위치의 제일 하단에 위치하면서 현재 내용을 덮어서 위에 위치하고 있다.

모바일 환경에서 적절하게 쓰일 수 있으나, 화면이 작은 PC 의 경우에는 화면을 답답하게 보이게 할 수 있으므로 디자인과 내용을 고려해서 사용해야 한다.

.footer 보다는 접근이 쉬워야하는 메뉴에 좀 더 적절하게 쓰일 수 있다.

profile
안녕하세요 반갑습니다. 개발간에 발생한 문제 등을 해결하는 과정을 기록하는 블로그입니다.

0개의 댓글