div 로 해더와 풋터가 있는 3단 구성을 하는 것은 생각보다 어려운 일이였다.
해더와 풋터의 높이는 고정이고 가운데 컨텐츠 부분은 윈도우 창 사이즈에 따라 변화해야 한다.
이때 풋터는 항상 전체 문서의 맨 아래 부분에 위치해야 한다.

여러가지 시도중
CSS layout: 100% height with header and footer 를 발견했다.

멋진 꽁수다.

풋터는 absolute 포지션을 지정하여 bottom:0 으로  전체 문서에서 맨 아래에 위치하도록 조정한다.
그러면 항상 풋터는 문서의 맨아래 있게 되는데, 문제는 이 놈이 컨텐츠 부분위를 덮고 있어서 풋터 높이 만큼의 컨텐츠 부분을 가리게 된다.
컨텐츠 부분은 높이를 100% 로 유지하도록 하고 padding 으로 아랫부분을 풋터 높이 만큼 밀어 올린다.
그렇게 되면 마치 풋터가 컨텐츠 부분안에 들어있는 듯이 동작한다.
좋은 팁이다.
신고

댓글을 달아 주세요