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