footer固定底部的方法

来源：懂视网责编：小采时间：2020-11-27 18:50:07

footer固定底部的方法

footer固定底部的方法:<!DOCTYPE HTML><html><head><meta charset="utf-8"> <title>footer始终居于底部</title><style type="text/css">* { margin:0; p

推荐度：

点击下载本文 文档为doc格式

导读footer固定底部的方法:<!DOCTYPE HTML><html><head><meta charset="utf-8"> <title>footer始终居于底部</title><style type="text/css">* { margin:0; p

<!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>

footer固定底部的方法

footer固定底部的方法:<!DOCTYPE HTML><html><head><meta charset="utf-8"> <title>footer始终居于底部</title><style type="text/css">* { margin:0; p

推荐度：

点击下载本文 文档为doc格式

标签：方法下面固定

热门焦点

footer固定底部的方法

footer固定底部的方法

footer固定底部的方法

最新推荐

猜你喜欢

热门推荐