在内容超出屏幕时，footer只有在滚动条拉直底部时才出现。当撑不满屏幕时，footer直接固定在底部。
主体区域 min-height:100%, 恰好把 footer 挤出一屏外，footer 本身使用负的 margin-top 往上提与 height 相同的距离，这时只需在主体区内部元素上添加 padding-bottom 把 footer 盖住的区域排开即可。
html:
<!DOCTYPE HTML> <html lang="en"> <head> <script id="jquery_182" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script> </head> <body> <div class="wrapper"> <div class="header">header</div> <div class="main"> <button id="add">add</button> <p>test test test</p> </div> </div> <div class="footer">footer</div> </body> </html>