css sticky footer

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

html

<div id="container">
    <div id="main" class="clearfix">
        <div id="content"></div>
    </div>
</div>
<div id="footer"></div>

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;}