页面排版框架分享-底部自适应处理
需求
页面排版的重要性毋庸置疑，其中一种情况是：
在页面太短的时候页脚footer出现在可视区的底部，从而撑起整个页面；
在页面足够长的时候让页脚footer出现在页面body的底部，不会覆盖原body的内容。
解决办法
html和body高度设置为100%，页面内容包裹在一个相对定位的.container的div里。
全局最小高度设置为100%，为兼容IE6可使用：
.container {
min-height: 100%;
/*ie6不识别min-height,如上下处理*/
height: auto !important;
height: 100%;
position: relative;
}footer区域为绝对定位，必须设置高度，否则需要利用javascript动态获取高度。
此高度用于保证footer区域不会覆盖body的其他内容，方法是：
footer区域的同级上一个div的padding-bottom设置为高度加上20px，20为footer和内容区的间隔20px：
.page {
width: 960px;
margin: 0 auto;
/*padding等于footer的高度+20px，其中20px为保证两者之间的间隔，自行调整*/
padding-bottom: 80px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/*footer的高度*/
height: 60px;
background: #6cf;
clear: both;
}示例分享
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>迷津渡口-页面框架分享底部自适应处理</title>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
height: 100%
}
.container {
min-height: 100%;
/*ie6不识别min-height,如上下处理*/
height: auto !important;
height: 100%;
position: relative;
}
.header {
background: #ff0;
padding: 10px;
margin-bottom: 20px;
}
.page {
width: 960px;
margin: 0 auto;
/*padding等于footer的高度+20，其中20px为保证两者之间的间隔，自行调整*/
padding-bottom: 80px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/*footer的高度*/
height: 60px;
background: #6cf;
clear: both;
}
.left {
width: 220px;
/*解开以下注释可查看内容高度超过浏览器高度的情况*/
/*height:1000px;*/
float: left;
margin-right: 20px;
background: lime;
}
.content {
background: orange;
width: 480px;
float: left;
margin-right: 20px;
}
.right {
width: 220px;
float: right;
background: green;
}
.clearfix:after,
.clearfix:before {
content: "";
display: table
}
.clearfix:after {
clear: both;
overflow: hidden
}
.clearfix {
zoom: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="header">这是头部</div>
<div class="page clearfix">
<div class="left">左侧边栏</div>
<div class="content">内容区</div>
<div class="right">右侧边栏</div>
</div>
<div class="footer">底部区域</div>
</div>
</body>
</html>小指才疏学浅，有任何疏漏之处，欢迎不吝赐教~
点赞2
支持一下