html+css底部自动固定底部

前端在切图过程中，肯定遇见过这种情况。

页面结构由三个部分组成，头部、内容、底部。

当一个页面的内容没撑满屏幕时，底部是跟着内容而并列存在的。

这个时候如果是大屏的话，底部下面会有多余的空白区域，而网页设计需求必须要底部贴近浏览器底部。

固定定位，绝度定位都不好使。

废话不多说，直接上代码实现：

<!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>

 

posted @ 2017-03-28 10:32  <_/>  阅读(18780)  评论(0)  编辑  收藏  举报