我们在布局的时候有这样一种情况，就是当页面高度没有超过屏幕高度的时候，footer 要固定到底部，而当页面超出满屏的高度的时候，footer 要随着高度走。下面我们就通过 CSS 实现这一效果：
<!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 { height:100%; }
.wrap {
height:auto;
min-height:100%;
_height:100%;
background:#CCC;
color:#fff;
font-size:18px;
text-align:center;
}
.main { padding-bottom:80px; }
.footer {
position:relative;
height:80px;
line-height: 80px;
margin-top:-80px;
background:#333;
color:#fff;
font-size:16px;
text-align:center;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<h1>七七事变祭</h1>
<p>中华民族创辉煌，</p>
<p>倭寇菲佣心中慌。</p>
<p>为虎作伥傍老美，</p>
<p>东海南海滋事狂。</p>
<br />
<p>历史潮流不可挡，</p>
<p>中华儿女当自强。</p>
<p>警钟长鸣记国耻，</p>
<p>发展经济强国防。</p>
<br />
<p>七七事变 77 周年，勿忘国耻，振兴中华！！！</p>
<br />
</div>
</div>
<div class="footer">
<h1>页面高度不满，底部固定</h1>
</div>
</body>
</html>
上面的代码实现了当内容不满一屏时，底部内容始终位于显示屏的底部；当内容超过一屏时，则位于内容底部。
你可能对这些文章感兴趣：
- 博客类淘宝客网站如何批量发布淘宝客商品
- 一个浏览器自带样式引起的css新认识
- WordPress插件推荐：Crayon Syntax Highlighter
- WordPress个人博客主题推荐（像书一样的Abook）
- WordPress插件推荐：WP-Today
- 零起点php入门第2课-php变量和常量
- 【WordPress建站基础】网站布局经典图文教程（3）
- 网站广告被屏蔽显示一张图实现方法
- 为什么我建议你双11购买阿里云服务器_阿里双11云服务器最新活动
- xiu2.1开启聚合（随机、最新、热门）文章图片模式
- wordpress最新版本下载地址
- WordPress调用文章发布日期和时间the_date()和the_time()
- WordPress后台登陆提示错误：Cookies因预料之外的输出被阻止的解决办法
- SEO都被你们玩坏了，创意404页面分享
如有疑问，请前往问答中心反馈！
反馈