<!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固定底部的方法的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号