前端在切圖過程中，肯定遇見過這種情況。
頁面結構由三個部分組成，頭部、內容、底部。
當一個頁面的內容沒撐滿屏幕時，底部是跟着內容而並列存在的。
這個時候如果是大屏的話，底部下面會有多余的空白區域，而網頁設計需求必須要底部貼近瀏覽器底部。
固定定位，絕度定位都不好使。
廢話不多說，直接上代碼實現：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1</title> <style> *{padding:0;margin:0;} html{height:100%;} body{min-height:100%;} body{position:relative;} .footer{ height:100px; background:red; width:100%; position:absolute; bottom:0; left:0; } .box{ padding-bottom:130px; } .box p{ line-height:30px; text-align:center; border:solid 1px green; } </style> </head> <body> <div class="box"> <p>離離原上草</p> <p>離離原上草</p> <p>離離原上草</p> <p>離離原上草</p> <p>離離原上草</p> <p>離離原上草</p> <p>離離原上草</p> <p>離離原上草</p> <p>離離原上草</p> <p>離離原上草</p> <p>離離原上草</p> <p>離離原上草</p> <p>離離原上草</p> <p>離離原上草</p> <p>離離原上草</p> <p>離離原上草</p> </div> <div class="footer"></div> </body> </html>