如何让footer保持在页面底端
2012-12-27
如果一个网页的内容不多，达不到屏幕的高度，那么页面的footer下面可能会出现空白，也就是说，没有出现在它应该出现的位置。如何让footer保持在页面底端呢？在网上搜索这个问题，各种解决方案五花八门，而且很多——至少在我的机器上实验——是错的，要不就是各种hack甚至动用JavaScript。
后来到底找到了一种简单有效的方法，原文在这里，复述于此，再讲几句闲话。
首先是页面的标记结构：
<html> <head>...</head> <body> <div id='wrapper'> ...content goes here... <div id='push'> </div> </div> <div id='footer'> ...footer goes here... </div> </body> </html>
也就是说，将页面的内容都放到wrapper块中，并在内容的最后添加一个空的div块push。接下来设置样式。
由于是页面内容不足而引发的问题，所以设置wrapper的min-height为100%，%100的意思是充满wrapper外部容器的100%，也就是充满body部分，因此，还需设置最外围的html和body块，设置它们的height为100%。这样已经把footer挤到最底下，基本完成了目标，但当页面内容很少，我们希望footer此时就处在屏幕最下面，可惜这时候footer会被挤到页面底下看不到的地方，需要往下滚才会出现，因此，我们对wrapper设置一个负的margin-bottom值，footer就上来了。
下面是样式：
*{margin:0;}
html, body {height:100%;}
#wrapper{min-height:100%; margin:0 auto -50px;}
#push{min-height:50px;}
#footer{min-height:50px; background:#aaaaaa;}
在上面提到的标记代码中，设置了一个用来填充空间的空的div块: push。 这个东西很微妙：因为wrapper的margin-bottom是负值，那么footer其实一直会覆盖着wrapper最底下的margin-bottom高度的内容，如果内容很少，比如上面那个示例，没有push不会有影响，当内容多到一页放不下的时候，footer就会覆盖内容。footer必然会覆盖wrapper最底下一点内容，所以我们放置一个空白的部分，即push块，恰好弥补了那负值的margin-bottom。所以真正有关系的是push的高度，但最好将提到的几个高度设成同一个值，这样既可避免覆盖，又可避免footer在内容较少时被挤到看不见的地方。讲到这里，标记的各个部分，以及几个高度的设置，应该讲清楚了。
