[转]css height:100%

CSS布局不一定都非常的复杂，但是有些时候看上去简单但是实现起来还不是那么轻松。

在这篇文章中，我们通过CSS来实现跨浏览器支持的100%高度的布局。

这段代码用来创建一个头部和段落，非常的简单了。
接下来，我们需要给页面设置一些通用的样式：

* {padding: 0;margin: 0;} body {font-family: "lucida sans", verdana, arial, helvetica, sans-serif;font-size: 75%;} h1 {font-size: 1.4em;padding: 10px 10px 0;} p {padding: 0 10px 1em;} 

 

这些代码都是比较简单的，而且在大多数浏览器中都是没有问题的。
现在，我们想象需要主内容区域填充页面的700px，包括2px的边框，然后给页面填充背景。
给容器添加样式很简单，但是100%的高度经常会给开发者带来困惑。我们看看怎么解决呢。
首先我们需要给html和body都设置100%的高度，这个经常被忽略，但是非常的重要，如果父元素没有指定高度，那么子元素的百分比的高度设置了也没用。所以我们需要先设置父元素的高度：

html, body {height: 100%;} 

 

在那些需要设置高度或者需要给容器设置样式的地方，设置100%高度是可以的，但是当内容超过可视区域出现滚动条的时候，容器高度就消失了。所以这里就需要设置mini-height，这样当区域小的时候可以正确显示，当区域大了以后也不会有问题。

#container {min-height: 100%;background-color: #DDD;border-left: 2px solid #666;border-right: 2px solid #666;width: 676px;margin: 0 auto;} 

 

但是这样写IE6不支持，因为IE6不认识mini-height，我们继续看怎么办？
 
IE6怎么办

解决这个问题还是比较简单的，在IE6下面，浏览器会把你设置的高度认为就是mini-height，所以当容器增大的时候，也能跟其他浏览器一样适应。我们可以使用一些hack来做到：

* html #container {height: 100%;}