用 CSS 实现 footer 的位置固定
Thursday, 23. July 2009, 10:47:39
在网上找到很多解决方案，觉得这个网站介绍的方法最省事：
http://ryanfait.com/sticky-footer/
实现方法简单说明如下：
首先，HTML要有以下内容
注意点：
如果没有「div class="wrapper"」，Opera下「class="footer"」和「div class="wrapper"」将会重叠显示。
实现方法简单说明如下：
首先，HTML要有以下内容
<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;
}
注意点：
如果没有「div class="wrapper"」，Opera下「class="footer"」和「div class="wrapper"」将会重叠显示。
WIDGETIZE