CSS 对底部应该做的处理

这里我们分为两部分：

  1. 没有固定，元素不满height :100%
  2. 固定了，但文字被遮挡（这一点同样适用于header）

1.没有固定，元素不满height :100%

演示

这个问题比较常见，我上次做footer就遇到了，解决也就是拿个padding来保留空间：

        html,body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        #wapper{  
            position: relative;   /*重要！保证footer是相对于wapper位置绝对*/  
            height: auto;          /* 保证页面能撑开浏览器高度时显示正常*/  
            min-height: 100%  /* IE6不支持，IE6要单独配置*/  
        }  
        #footer{  
           position: absolute;  bottom: 0; /* 关键 */  
           left:0; /* IE下一定要记得 */  
           height: 60px;         /* footer的高度一定要是固定值*/  
           background: #66ffcc;
           width: 100%;
        }  
        #main-content{  
           padding-bottom: 60px; /*重要！给footer预留的空间*/  
        }

html完整源码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Left-Right</title>
    <style type="text/css">
        html,body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        #wapper{  
            position: relative;   /*重要！保证footer是相对于wapper位置绝对*/  
            height: auto;          /* 保证页面能撑开浏览器高度时显示正常*/  
            min-height: 100%  /* IE6不支持，IE6要单独配置*/  
        }  
        #footer{  
           position: absolute;  bottom: 0; /* 关键 */  
           left:0; /* IE下一定要记得 */  
           height: 60px;         /* footer的高度一定要是固定值*/  
           background: #66ffcc;
           width: 100%;
        }  
        #main-content{  
           padding-bottom: 60px; /*重要！给footer预留的空间*/  
        }  
    </style>
</head>
<body>
<!-- 父层 -->  
<div id="wapper">  
    <!-- 主要内容 -->  
    <div id="main-content">  

    </div>  
    <!-- 页脚 -->  
    <div id="footer">  
    </div>  
</div>  
</body>
</html>

对IE6还要做特别处理：

<!--[if IE 6]->  
<style>  
#wapper{height:100%;} /* IE在高度不够时会自动撑开层*/  
</style>  
<![endif]-->

所以让人忧伤，原文：http://blog.csdn.net/jazywoo123/article/details/9866765

类似的想法，我们想到了2

2.固定了，但文字被遮挡（这一点同样适用于header）

演示

鉴于节省行数，我们就把那段文字删了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Left-Right</title>
    <style type="text/css">
        html,body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .container {
            margin: 0 auto;
            width: 100%;
            height: 100%;
        }


        .footer {
            height: 50px;
            width: 100%;
            background: #aaffee;
            position: fixed;
            bottom: 0;
        }

        .main {
            width: 100%;
            /*word-break: break-word;*/
            padding-bottom: 50px; 
        }
    </style>
</head>
<body>
    <div class="container">

        <div class="main">
        </div>
        <div class="footer">
        </div>
    </div>
</body>
</html>

关于bottom: 0请见CSS 元素位置小结
扩展阅读：http://www.w3school.com.cn/css/pr_pos_bottom.asp

植入部分

如果您觉得文章不错，可以通过赞助支持我。

如果您不希望打赏，也可以通过关闭广告屏蔽插件的形式帮助网站运作。

标签: 成品, 源码, 代码段

添加新评论