min-height:100% 를 이용해서 footer를 화면아래에 고정하기

/* html */

<body>

<h3>header</h3>

</div>

<h3>container</h3>

</div>

<h3>footer</h3>

</div>

</body>

/* css */

html, body{width:100%height:100%}

html{width:100%;height:100%}

body{width:100%;height:100%}

html과 body에 height:100%를 적용시킵니다.

#header{width:100%;height:50px;position:relative;z-index:20;overflow:hidden;background-color:#fcc}

백그라운드컬러는 잘 먹혔는지 확인을 위한것일뿐입니다.

높이값을 꼭 header에 정해주어야되며 position이 필수로 있어야지 container가 올라왔을때 z-index를 이용해서 container위에 올라올수있습니다.

(z-index의 값은 무조껀 container보다 높아야됨)

#container{width:100%;min-height:100%;position:relative;z-index:10;margin:-50px 0 -50px 0;background-color:#FF6}

min-height의 값을 100%로 지정해주고 position을 이용해서 z-index를 낮춥니다.

margin의 경우 top -50은 header의 높이값 bottom -50은 footer의 높이값을 넣어줍니다.

.cont{padding-top:50px}

container가 header의 아래에 위치해 있기때문에 글을 정상적으로 보여주기 위해 cont에 padding-top:50을 줍니다(50은 header의 높이값)

#footer{width:100%;height:50px;position:relative;z-index:20;overflow:hidden;background-color:#CCF}

footer또한 header와 같이 높이값등을 넣어주면

아래와같은 화면이 보여지게됩니다.

참고로

*html #container{height:100%;}를 넣지않으면 IE6에서 정상적으로 출력되지않습니다.

티스토리툴바