<!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>
<div class="wrapage">
<div 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 />
</div>
</div>
<div class="footer">
<h1>页面高度不满,底部固定</h1>
</div>
</body>
</html>
footer固定底部-HTMLCSS方法
最新推荐文章于 2022-05-25 08:45:01 发布