footer置于页面最底部

我们在做网页的时候，有时候页面内容太短，导致footer元素会浮在上面，很影响视觉。如下图：

将footer置于页面底部的思路：将footer的父元素最小高度设置为100%，footer为绝对定位，底部0即可。

<div id="wapper"><div id="main-content"></div><div id="footer"></div></div>

css：

#wapper{position: relative;height: auto;min-height: 100%;}#main-content{padding-bottom: 60px;  /*这里为footer预留的空间，使其不遮挡其他元素*/}#footer{position: absolute;bottom: 0;height: 60px;}