您的位置：首页 > Web前端 > CSS

css模块始终位于浏览器底部效果

2010-12-03 13:14 197 查看

题目描述：当内容不满一屏时，底部内容始终位于显示屏的底部；当内容超过一屏时，则位于内容底部。

示例代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>footer始终居于底部</title>
<style type="text/css">
* { margin:0; padding:0; }
body { font:12px/1.5 arial; }
html, body, .wrap { height:100%; }
.wrap { height:auto; min-height:100%; _height:100%; background:#CCC; color:#fff; font-size:16px; text-align:center; }
.main { padding-bottom:80px; }
.footer { position:relative; 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>
<h1>内容部分</h1>
<h1>内容部分</h1>
<h1>内容部分</h1>
<h1>内容部分</h1>
<h1>内容部分</h1>
<br />
<h2>测试测试</h2>
<h2>测试测试</h2>
<h2>测试测试</h2>
<h2>测试测试</h2>
<h2>测试测试</h2>
<h2>测试测试</h2>
<br />
</div>
</div>
<div class="footer">
<h1>底部</h1>
</div>
</body>
</html>

必须注意的是，需要把footer单独拿出来。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航