CSS 对底部应该做的处理

这里我们分为两部分：

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

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

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

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

html完整源码：

1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>Left-Right</title>
6    <style type="text/css">
7        html,body {
8            margin: 0;
9            padding: 0;
10            height: 100%;
11        }
12        #wapper{  
13            position: relative;   /*重要！保证footer是相对于wapper位置绝对*/  
14            height: auto;          /* 保证页面能撑开浏览器高度时显示正常*/  
15            min-height: 100%  /* IE6不支持，IE6要单独配置*/  
16        }  
17        #footer{  
18           position: absolute;  bottom: 0; /* 关键 */  
19           left:0; /* IE下一定要记得 */  
20           height: 60px;         /* footer的高度一定要是固定值*/  
21           background: #66ffcc;
22           width: 100%;
23        }  
24        #main-content{  
25           padding-bottom: 60px; /*重要！给footer预留的空间*/  
26        }  
27    </style>
28</head>
29<body>
30<!-- 父层 -->  
31<div id="wapper">  
32    <!-- 主要内容 -->  
33    <div id="main-content">  
34
35    </div>  
36    <!-- 页脚 -->  
37    <div id="footer">  
38    </div>  
39</div>  
40</body>
41</html>
42

对IE6还要做特别处理：

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

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

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

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

演示

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

1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>Left-Right</title>
6    <style type="text/css">
7        html,body {
8            margin: 0;
9            padding: 0;
10            height: 100%;
11        }
12        .container {
13            margin: 0 auto;
14            width: 100%;
15            height: 100%;
16        }
17
18
19        .footer {
20            height: 50px;
21            width: 100%;
22            background: #aaffee;
23            position: fixed;
24            bottom: 0;
25        }
26
27        .main {
28            width: 100%;
29            /*word-break: break-word;*/
30            padding-bottom: 50px; 
31        }
32    </style>
33</head>
34<body>
35    <div class="container">
36
37        <div class="main">
38        </div>
39        <div class="footer">
40        </div>
41    </div>
42</body>
43</html>
44

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

评论 (0)