当头和中间内容的高度大于屏幕时，让尾部始终在内容的底部；当头和中间内容的高度小于屏幕时，让尾部在屏幕底部

前端小白的复习笔记～

一般的网页都分为头、内容、尾三部分，一般写的时候不会有这个问题，因为中间的内容肯定超出屏幕高度，只要让尾部的容器跟在内容后面就是我们想要的效果。但是一旦网页是用来呈现列表，最后一页很可能只有一两条，这时候还用前面所说的方法，尾部就会顶上去，而不在屏幕底部。如果将底部用绝对定位定位在屏幕底部，那么当内容高出屏幕宽度的时候又不合理。所以需要一种方法，让其内容高出屏幕高度的时候尾部在内容后面而不是屏幕底部，当内容少于屏幕高度的时候，让尾部定位在屏幕底部。

以下是代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{height: 100%;}
        html{height: 100%;}
        .m-container{position: relative;min-height: 100%;height: auto !important;height: 100%;background-color: red;width: 100%;}
        .header{width: 100%;height: 200px;background-color: #000;}
        .main{padding-bottom: 140px;width: 100%;}    
        .footer{position: absolute;bottom: 0;background-color: #ccc;width: 100%;height: 140px;}
    </style>
</head>
<body>
    <div class="m-container">
        <div class="header"></div>
        <div class="main"></div>
        <div class="footer"></div>
    </div>
    
</body>
</html>

注意，body和html一定要同时设为100%，否则无法起作用。

posted on 2015-11-13 11:49 美儿宝阅读(594) 评论(0) 编辑收藏举报