footer固定底部的方法

来源：舟合美食网

<!DOCTYPE HTML><html><head><meta charset="utf-8">
<title>footer始终居于底部</title><style type="text/css">* { 
margin:0; padding:0; }
body { 
 font:14px/1.8 arial; }/*核心代码，html,body,wrap高度100%*/html, body, 
.wrapage { 
 height:100%; }/*外框高度自动，最小高度100%，ie下高度100%*/
.wrapage { 
 height:auto; 
 min-height:100%; 
 _height:100%; 
 background:#CCC; 
 color:#fff; 
 font-size:18px; 
 text-align:center; 
}/*内容主体下padding 防止底部叠加*/
.mainw { padding-bottom:80px; }/*底部相对定位，高度为主体的下padding,负margin值。*/
.footer { 
 position:relative; 
 height:80px; 
 margin-top:-80px; 

 background:#eee; 
 color:#fff; 
 font-size:16px; 
 text-align:center; 
}</style></head><body><p class="wrapage">
 <p class="mainw">
 <h1>页面高度不满，底部固定</h1>
 <p>页面高度不满，底部固定</p> 
 <p>页面高度不满，底部固定</p> 
 <p>页面高度不满，底部固定</p> 
 <p>页面高度不满，底部固定</p> 
 <br />
 <p>页面高度不满，底部固定</p> 
 <p>页面高度不满，底部固定</p> 
 <p>页面高度不满，底部固定</p>
 <p>页面高度不满，底部固定</p>
 <br />
 <p>页面高度不满，底部固定</p>
 <br /> 
 </p></p><p class="footer">
 <h1>页面高度不满，底部固定</h1>
 </p>
 </body>
</html>

违法及侵权请联系：TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务