用 CSS 实现 footer 的位置固定
[ 2009-07-23 06:52:11 | Author: seaboat ]
在网上找到很多解决方案，觉得这个网站介绍的方法最省事：
http://ryanfait.com/sticky-footer/
实现方法简单说明如下：
首先，HTML要有以下内容
其次，CSS要这样写
注意点：
如果没有「div class="wrapper"」，Opera下「class="footer"」和「div class="wrapper"」将会重叠显示。
Comments Feed: http://www6.webng.com/seaboat/feed.asp?q=comment&id=750
http://ryanfait.com/sticky-footer/
实现方法简单说明如下：
首先，HTML要有以下内容
<body>
<div class="wrapper">
<!--
网页内容
-->
<div class="push">
</div>
</div>
<div class="footer">
</div>
</body>
<div class="wrapper">
<!--
网页内容
-->
<div class="push">
</div>
</div>
<div class="footer">
</div>
</body>
其次，CSS要这样写
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%; /* 为了兼容IE */
margin: 0 auto -100px; /* 下部空余为 class="footer" 同样高度的负值 */
}
.footer,
.push {
height: 100px;
}
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%; /* 为了兼容IE */
margin: 0 auto -100px; /* 下部空余为 class="footer" 同样高度的负值 */
}
.footer,
.push {
height: 100px;
}
注意点：
如果没有「div class="wrapper"」，Opera下「class="footer"」和「div class="wrapper"」将会重叠显示。
[Last Modified By seaboat, at 2009-07-23 06:55:36]
Comments Feed: http://www6.webng.com/seaboat/feed.asp?q=comment&id=750
There is no comment on this article.
