实例:页脚放置在屏幕最下方(footerStick)

更新时间：2007-12-25参与评论

需要在内容高度不足的时候把页脚放置在屏幕最下方（footerStick）？如果不想position: fixed还有什么办法吗？有的，你可以看看下面这些精彩文章：

最小高度100%，页脚保持在底部的布局方法，来自踩IE
footerStick，来自solardreamstudios
footerStickAlt，来自The Man in Blue

我个人编写xhtml的风格是，对于div，我是能不加就不加的，可是在这个footerStick的问题上，还真没找到完美的解决方案，研究了这么多的footerStick，没有一个不加额外的div的，多少而已。
我也不能幸免，但我这种方案只需一个额外的div，而且易于理解。开讲：

现在组织布局结构的标准一般是这样的：

<div id="wrap">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</div>为了实现footerStick，我需要在id为#main的div加上一个#m_ext，如下：
<div id="wrap">
<div id="header"></div>
<div id="main"><div id="m_ext"></div></div>
<div id="footer"></div>
</div>首先，为了让body内的元素能够实现100%的高度，需要：
html, body {
height: 100%;
height: 100%;
}

然后，我们就可以让#wrap的高度为100%了：

#wrap {
position: relative;
height: 100%;
}

为何要position: relative;？这是我实现footerStick的关键了。首先声明的是，我这个footerStick是有前提的：#header和#footer的高度是固定的。在#wrap的定位为relative后，其内定位为absolute的元素就可以脱离文档流而存在。