footer贴底的纯css实现方法

页面内容少时，footer跑到屏幕中间戳着是很难看的。用fixed吧，在内容多的时候又想它不要一直出现在屏幕下方，毕竟它不是那么重要。那么两全其美的办法是怎样的呢？

html代码


css代码


说明：

html,body{height:100%}很关键，只有父级元素设置了高度，里面元素的相对高度才会生效。html、body 100%的高度是屏幕的高度。

container容器设置最小高度min-height 为100%，而不是height:100%，这很关键，可以使它在内容很少（或没有内容）的情况下，能保持一屏的高度，（不过在IE6不支持min-height，所以为了兼容IE6，做以下处理：height:auto !important;height:100%;）；在内容很多的情况下，也能展现实际的高度。同时在container容器中设置“position:relative”，再对里面的footer元素进行绝对定位后，这样footer就会根据container的高度来跑了，始终保持在container底部。
main这个容器有一个很关键的设置，需要在这个容器上设置一个padding-bottom值，而且这个值要等于（或略大于）页脚footer的高度（height）值。

div#footer容器：div#footer容器必须设置一个固定高度，单位可以是px(或em)。div#footer还需要进行绝对定位，并且设置bottom:0；让div#footer固定在容器div#container的底部，这样就可以实现我们前面所说的效果，当内容只有一点时，div#footer固定在屏幕的底部（因为div#container设置了一个min-height:100%），当内容高度超过屏幕的高度，div#footer也固定在div#container底部，也就是固定在页面的底部。给div#footer加设一个”width:100%”，让它在整个页面上得到延伸。

总结：

思路就是对footer采用绝对定位，因为绝对定位是根据实际高度来的，我们就要保证其父容器在不足一屏时高度为一屏，在超过一屏时，高度为实际高度，通过min-height可以实现，相对高度又需要html,body{height:100%}配合，这样就OK了。