高度100%页面自适应布局详解

Question

有时候可能我们会遇到这样的设计，内容需要在浏览器一屏范围内显示，而不会出现滚动滚动条查看内容的情况，如一些富Web应用，让你感觉更像在操作一个程序甚至是窗口界面系统。

追述过去，聊天室这类的Web应用就是如此，而往往我们会首先考虑框架元素（Frame）嵌入不同的 HTML 页面实现，特别是早期的类似 Ajax 应用就会用到框架这个古老的元素

但很显然，追求页面标准化和 Web 设计现代化的结构设计师不会首先框架，而我也因为个人原因比较厌恶这个玩意儿，好了讲了这么多废话，无非是想用无框架的做法将页面结构和样式做出来，并且要保证 IE 下完美（近似完美）的表现。

这是我的 HTML 内容，我所做的结构是一个简单的，由顶部、内容、尾部组成的页面：

<div id="wrapper">
	<div id="navBar">
		<div class="stretch">Top content here</div>
	</div>
	<div id="chatContent">
		<div class="inner">Chat content here</div>
	</div>
	<div id="chatInput">Input Area</div>
</div>

这是一个近似于 Omegle 匿名聊天室的结构。

顶部的 navBar 和底部的 chatInput 区域是固定高度的，但主体内容 chatContent 则需要来自适应了（不同的分辨率，不同的浏览器都不同）。

很多人会想到用 JS 的方法来实现，但显然并不是一个好主意。

下面来看怎么用 CSS 来尽力保证浏览器们显示正常，让用户得到一个合理的画面

首页我们按照标准来制作，为了保证一切都在自己应该在的位置上，那么我们就要用到绝对定位

body {
	color:#333;
	font-size:62.5%;
	text-align:center;
	background-color:#e5e3db;
	height:100%;
}
#wrapper {
	width:100%;
	height:100%;
}
#navBar {
	position:absolute;
	left:0;
	right:0;
	top:0;
	height:3.2em;
	background-color:red;
}
#chatContent {
	position:absolute;
	top:5.2em;
	bottom:15em;
	left:2em;
	right:2em;
	background-color:yellow;
}
#chatInput {
	position:absolute;
	left:2em;
	right:2em;
	bottom:1em;
	height:10em;
	background-color:blue;
}

这样完成了第一步，看看FF下的效果，拉伸浏览器看看，我们完成了一个100%高度的布局

可是IE 6可不这么认为你的布局是这样的，对决定定位的元素，它仅仅会适应其内容的高宽，这样就破坏了我们精心设计的布局

那如何解决，我请教了一下 Google 发现国外有一个案例：http://www.pmob.co.uk/temp/fixed-header-footer-left-new.htm

这个案例很好的解决了 IE6 的问题，不需要任何 JS，仅仅添加一些仅让 IE6 读懂的元素

于是根据这个案例我写下

<!–[if ie]>
<style>
html, body {
	overflow:hidden;
}
* html {
	padding:5.2em 0 15em;
}
* html body {
	padding:5.2em 0 15em;
	padding:0;
}
* html #chatInput {
	width:97%;
}
* html #chatContent {
	width:97%;
	height:100%;
	position:relative;
	margin-left:2em;
	margin-right:0;
	left:0;
	top:0;
	right:0;
	bottom:0;
	float:left;
	display:inline;
}
* html .stretch {
	width:100%;
}
* html .inner {
	position:absolute;
	height:100%;
}
</style>
<![endif]–>

可以看到上面 HTML 中两个类 stretch 和 inner 起到了作用，用于撑大父层，为 100% 高度提供了必要元素。

* 选择器对 HTML 元素设置了 padding 以提供 chatContent 一个有效的范围，这样 chatContent 设置为 relative 进行重新定位留在了文档流中，就拥有了高度

至于宽度，完全是利用百分比，所以这个方案中缺陷就这里，不能完全统一 IE6 中容器的宽度，但影响不大，如果再结合JS就能比较完美了

这样基本上就完成了浏览器兼容问题，可以进一步的设计下去，当然在实际案例操作中还会有很多问题，特别是更复杂的布局情况。