페이지의 하단에 footer 고정 시키기
position:fixed를 사용하면 컨텐츠 양에 상관 없이 항상 브라우져 하단에 고정되어 있는 footer를 보게 됩니다. 컨텐츠 양이 많을 경우 컨텐츠가 끝나는 지점에 footer를 고정시키기 위해서는 아래와 같이 심플한 소스를 사용하시면 됩니다. <!DOCTYPE html> <HEAD> <TITLE>footer 하단 고정</TITLE> </HEAD> <style tyle="text/css"> html, body { margin:0; padding:0; height:100%; } #wrapper { position:relative; min-height:100%; } #header { height:70px; background:#ccc; } #container { padding:20px; } #footer { position:absolute; bottom:0; width:100%; height:70px; background:#ccc; } </style> <BODY> <div id="wrapper"> <div id="header">header</div> <div id="container">나는 container입니다. </div> <div id="footer">footer</div> </div> </BODY> </HTML>
실행화면 
|
|
|
|
오렌지
