CSS 对底部应该做的处理
这里我们分为两部分:
- 没有固定,元素不满
height :100%
- 固定了,但文字被遮挡(这一点同样适用于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
植入部分
如果您觉得文章不错,可以通过赞助支持我。
如果您不希望打赏,也可以通过关闭广告屏蔽插件的形式帮助网站运作。