经常需要用到这种效果：页面内容很少时，底部位于窗口最下方；内容高度超出窗口时，底部随之下移，居于页面最底部。

html

css

html, body, #container{
   height: 100%;}#container{
    min-height: 100%;}#main {
   padding-bottom: 150px;}#footer {
   position: relative;         margin-top: -150px;         height: 150px;         clear:both;        }.clearfix:after {
   content: ".";    display: block;    height: 0;    clear: both;    visibility: hidden;}.clearfix {
   display: inline-block;}