方法一：給html、body都設置100%的高度，確定body下內容設置min-height有效，然后設置主體部分min-height為100%，此時若沒有header、footer則剛好完美占滿全屏（參考《div絕對居中、寬高自適應、多欄寬度自適應》），但是有了這兩個，只能另尋他路，由於高版本瀏覽器對box-sizing的支持，我們可以在100%的高度中通過padding給header、footer空出兩部分空白區域，再通過給header設置等同於自身高度的負值margin-bottom，給footer設置等同於自身高度的負值margin-top，就完美的把兩者移回可見區域，如此以來，既滿足content部分不滿一屏時footer在底部，又滿足了，超過一屏時footer被撐開的需求。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>footer始終處在底部</title> </head> <style> *{ margin: 0; padding: 0; box-sizing:border-box; } html,body { height: 100%;} header { height: 60px; margin-bottom: -60px; background: #1381cc; color: #FFF; position: relative; } section { background: #fff; min-height: 100%; padding: 60px 0 60px;} footer { height:60px; margin-top: -60px; background: #0c4367; color: #FFF; } </style> <body> <header></header> <section class="content"> <div style="height:1000px;"></div> </section> <footer class="footer"></footer> </body> </html>
方法二：將footer以外的部分再用wrap包裹起來，內部設置padding-bottom，footer相同的使用margin-top，如此以來不用使用border-box；
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>footer始終處在底部</title> </head> <style> *{ margin: 0; padding: 0; } html,body { height: 100%;} .wrap{ min-height: 100%; } .min{ padding-bottom: 60px; } header { height: 60px; background: #1381cc; color: #FFF; } section { background: #fff; } footer { height:60px; margin-top: -60px; background: #0c4367; color: #FFF; } </style> <body> <div class="wrap"> <div class="min"> <header></header> <section class="content"> <div style="height:10px;"></div> </section> </div> </div> <footer class="footer"></footer> </body> </html>
三：兼容更強
