页面排版框架分享-底部自适应处理
需求
页面排版的重要性毋庸置疑,其中一种情况是:
在页面太短的时候页脚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
支持一下