상하단 고정 레이아웃

:: CSS ::

*{margin:0; padding:0;} hr{position:absolute; left:-999px; width:1px; height:1px; line-height:0; font-size:0; overflow:hidden; visibility:hidden;} #wrapper{width:100%; height:auto;} #header{width:100%; height:150px; background-color:pink;overflow:visible; position:fixed; top:0; left:0; z-index:200;} #container{width:100%; height:auto; margin-top:150px;} #footer{overflow:visible; width:100%; height:50px; background:orange;overflow:visible; position:fixed; bottom:0; left:0; z-index:200;} #cont1{height:500px; background-color:#e4e4e4;} #cont2{height:700px; background-color:skyblue;} #cont3{height:500px; background-color:lightyellow;} #cont4{height:700px; background-color:lightgreen;} #cont5{height:700px; background-color:lightorange;} 　

:: HTML :: 

<div id="wrapper"> <div id="header"> 상단 </div> <hr/> <div id="container"> <div id="cont1"> 컨텐츠01 </div> <div id="cont2"> 컨텐츠02 </div> <div id="cont3"> 컨텐츠03 </div> <div id="cont4"> 컨텐츠04 </div> <div id="cont5"> 컨텐츠05 </div> </div> <hr/> <div id="footer"> </div> </div>