页面的footer栏, 需要始终保持在整个页面的最底部:

图片来源


参考1: How to keep footers at the bottom of the page

HTML:

<div id="container">
  <div id="header"></div>
  <div id="body"></div>
  <div id="footer"></div>
</div>

CSS:

html,
body {
  margin:0;
  padding:0;
  height:100%;
}
#container {
  min-height:100%;
  position:relative;
}
#header {
  background:#ff0;
  padding:10px;
}
#body {
  padding:10px;
  padding-bottom:60px;   /* Height of the footer */
}
#footer {
  position:absolute;
  bottom:0;
  width:100%;
  height:60px;   /* Height of the footer */
  background:#6cf;
}

这里注意几点:

现在 tfcs 就是用的这个布局. 因为footer有border-top和margin, body和footer设置了padding-bottom和height, 中间会有重叠的部分.


参考2: Make the Footer Stick to the Bottom of a Page

HTML:

<div id="container">
  <div id="header"></div>
  <div id="body"></div>
  <div class="push"></div>
</div>
<div id="footer"></div>

CSS:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
#container {
  min-height: 100%;
  height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
  height: 100%;
  margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
#footer, .push {
  height: 155px; /* .push must be the same height as #footer */
}

这里要注意几点:

好像我的wiki的yasimple主题用的是这种布局


其它参考: