웹페이지 길이와 관계없이 footer 하단에 고정하기

1. 목표
‘To-Do List 웹사이트’의 footer를 contents 길이와 관계없이 가장 하단에 고정하기

 

2. 방법

1) footer가 div class=“wrapper” 안에 포함되었을 때 : position:fixed; 이용
ㆍposition:fixed; 는 contents 내용이 길든 짧든 무조건 footer를 하단에 위치하게 한다.
ㆍ문제점: contents 길이가 짧을 때는 footer가 하단에 고정되어있는 것처럼 보이지만, 내용이 길어져 스크롤이 생기면 footer가 contents 위로 올라오며 contents보다 footer가 강조된다.

See the Pen footer- position:fixed; by hi-iamim2 (@hi-iamim2) on CodePen.

contents 예문은 고등학생 때 국어 수행평가로 달달 외었던 훈민정음 서문을 사용했다. 다만, 해석은 학창시절 기억에 의존한 터라 부정확할 수 있다.

 

2) footer를 div class=“wrapper” 밖으로 뺐을 때 : position:relative;
(1) wrapper 설정
ㆍwrapper는 height: auto;로 설정 : height:100%로 설정하면 wrapper가 페이지 높이를 다 쓰면서 footer가 하단에 고정될 것 같겠지만, footer는 첫 화면 상태로 고정되고 스크롤에는 반응하지 못한다. 즉 스크롤을 내리면 1)과 비슷한 형태가 된다. 때문에 wrapper는 height: auto; 로 설정. 같은 맥락으로 min-height도 100%로 설정한다.
ㆍcontents침범 없이 footer를 확실하게 하단에 고정시키기 위해 wrapper에 footer의 높이만큼 padding-bottom를 부여한다.


(2) footer 설정
ㆍdiv 외부 요소인 footer의 position은 relative;
ㆍfooter입장에서는 wrapper 때문에 밖으로 밀려났으므로 transform: translateY(-100%) 혹은 margin-top: footer 높이; 설정으로 하단에 고정되어 위치한다.

See the Pen footer - position:relative; by hi-iamim2 (@hi-iamim2) on CodePen.

 

 

3) flex 활용
ㆍhtml을 고치지 않아도 돼서 position 활용 보다 좋음.
ㆍfooter는 div class=“wrapper” 안에 포함
ㆍflex는 주축에서 작동한다. flex-direction 기본값은 row
ㆍcss에서 html, body의 height는 100%로 설정: position 활용처럼 얘네가 페이지를 다 먹는다.
ㆍcss에서 wrapper만 설정하면 된다. : display: flex; , flex-direction: column; , height: 100%;
ㆍcontents가 디스플레이 화면크기를 넘을 때 footer 높이가 정상출력되지않는 문제해결위해 위아래에 padding부여
ㆍ다만, footer는 내용에 따라 높이가 자동부여되도록 특정 높이를 정하지않는다.

See the Pen footer - display: flex; by hi-iamim2 (@hi-iamim2) on CodePen.

 

 

참고자료

Rock's Easyweb youtube


이제 To-Do List footer 고치러가야지..ㅎ