何为高度自适应？

高度自适应就是高度能跟随浏览器窗口的大小改变而改变，典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏，下面一栏高度自适应用于显示内容。高度自适应不像宽度自适应那样简单，在兼容浏览器方面也稍微复杂一些。

布局思路

在IE7+及chrome、firefox等浏览器中，高度自适应可以利用绝对定位来解决。但一个元素是绝对定位时，如果没有给它设定高度或宽度，则它的的高度和宽度是由它的top、right、bottom、left属性决定的，但这一法则在IE6中并不适用，因此在IE6中还得另辟蹊径。在IE6中给html设定padding,并不会撑大html元素的尺寸，这正是我们要利用的地方。

下面的这段代码没管Ie，在chrome下显示正常：



<style>
body,div{
    margin:0;
    padding:0;
    color:#f00;
}
.top{
    background:#36c;
    height:100px;
}
.main{
    background:#f90;
    width:100%;
    position:absolute;
    top:100px;
    bottom:0;
}
</style>
</head>

<body>
<div class="top">wo shi top</div>
<div class="main">wo shi main</div>
</body>


css高度自适应_html

如果把position:absolute注释掉。则显示：

css高度自适应_高度自适应_02

可以看到main只根据内容占了一行。

推广

这种方法也适用于顶栏与底栏高度固定，中间那栏高度自适应的三栏布局.

如果我们把position改成relative，则显示如下：

css高度自适应_chrome_03

 

relative，设置top，left只是相对于原来的文字偏移而已。