好!欢迎访问迷津渡口 现在时间是:

迷津渡口

越感到迷惑 越接近真理

页面排版框架分享-底部自适应处理

需求

页面排版的重要性毋庸置疑,其中一种情况是:

在页面太短的时候页脚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
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 恋恋风尘
  2. 恋恋风尘
  3. 恋恋风尘
  4. 恋恋风尘
  5. 恋恋风尘
  6. 恋恋风尘
  7. 恋恋风尘
  8. 恋恋风尘
  9. 恋恋风尘