CSS | sticky footer. 하단에 footer 고정시키기

참조 : pure-css-sticky-footer

화면이 길든 짧든 footer 를 화면의 끝에 위치시키는 방법이다.

문서의 끝에 footer 를 위치하게 되면 문서의 양이 화면보다 적은 경우 footer가 화면의 중간쯤에 위치하게 된다.

그렇다고 position: absolute 로 화면 끝에 위치시키니 가변적으로 변하는 컨텐츠의 크기에 대응하지 못하고 footer 가 컨텐츠를 가려버리는 현상이 벌어졌다.

그래서 찾게된 방법.

footer 를 제외한 나머지 컨텐츠의 height 를 100% 로 잡는 것이다.

그와 동시에 가변적인 컨텐츠의 영역은 height:auto; min-height:100% 로 줘서 최소 height 가 100%, 컨텐츠의 양이 늘어나면 height 도 따라서 늘어나게 했다.

여기서 중요한 것은 height 를 100%로 설정하는 것이 컨텐츠 div 외에도 body, html  까지 설정해 줘야 하는 것이다.

body 만 100%를 설정했더니 컨텐츠 엘레먼트 height 가 100%가 되지 않았다가 html 의 height 까지 100% 로 설정하자 컨텐츠 엘레먼트 height 가 100% 로 나왔다.

마지막은 footer 의 위치를 자신의 높이만큼 margin-top 에서 빼줘서 화면이 늘어나는 것을 막았다.

나는 header - contents - footer 3중 구조로 개발중인데 위의 참조 링크는 container - footer 이중 구조이다.

이중 구조 일 때 container 는 본인 크기를 100% 로 하고 footer 의 위치만 조절하면 되었는데 내가 개발하는 3중구조는 header 의 부분까지 고려해야 한다.

그래서 나는 contents 의 height 를 100% 로 주되, header 의 height 만큼을 margin-top 에서 마이너스값으로 넣어 contents 의 위치를 조절했다.

footer 는 위의 방법과 똑같이 개발했다.

코드는 위 링크를 참조하면 될 것이다.