footer固定底部的方法
2020-11-27
来源：爱够旅游网
<!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> 显示全文