CSS HTML5/퍼블리싱 팁

푸터가 항상 하단에 있게 할때

웹디자이너 Kang Ji Yeon 2016. 11. 9. 20:29
반응형

html, body { height: 100%; margin: 0; padding: 0; } 
#header { height: 100px; background: #ddd; position: relative; z-index: 1; } 
#content-box { min-height: 100%; margin: -100px 0 -50px 0; } 
*html #content-box { height: 100%; } 
#content { padding: 100px 0 50px 0; } 
#footer { height: 50px; background: #ddd; } 


<div>header (height 100pixel) </div> 
<div>
 <div> <p>contents</p><p>contents</p><p>contents</p> </div> 
</div>
<div> footer (height 50pixel) </div> 


2번째방법
contents{height:expression(document.body.clientHeight-130);}
130 -> 상단 height와 하단 height값

반응형