前端在切图过程中，肯定遇见过这种情况。
页面结构由三个部分组成，头部、内容、底部。
当一个页面的内容没撑满屏幕时，底部是跟着内容而并列存在的。
这个时候如果是大屏的话，底部下面会有多余的空白区域，而网页设计需求必须要底部贴近浏览器底部。
固定定位，绝度定位都不好使。
废话不多说，直接上代码实现：
<!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>