标签：
最近一直遇到关于高度自适应的问题，今天来做一下总结。
其实如果元素没有设置高度，一般都会跟随内容变化，包裹内容
比如这样的
<div class="wrap"> <h1>高度自适应</h1> <p> 我是高度自适应<br/> 我是高度自适应<br/> 我是高度自适应<br/> 我是高度自适应<br/> </p> </div>
在浏览器中可以看到.wrap这个div的高度为所有标签的高度和
回到整题，要使高度自适应一般有2种办法，第一就是设置元素的高度为100%，第二就是用js计算文档内容的实际高度，然后设置css样式。
我一般不会先考虑第二种，因为自己觉得有点麻烦。而且我觉得大部分都可以用css来解决。
当然设置高度100%是相对(父元素要有高度，子元素设置了100%才有效)，所以一般就需要用到相对定位(父元素)和绝对定位(子元素)
基本思路是这样的
html:
<div class="wrap"> <div class="left"></div> <div class="right></div> </div>
css:
.wrap{position:relative;} .left{ position:absolute; height:100%; top:0; left:0; }
嗯，思路对了，可是我最近在公司做的一个页面死活不起效果，但是后来还是解决了，下面贴一个类似的例子
总体是两列布局（左边是导航），右边是两行布局（一个头部和一个主题）
一开始我从html到div都设置了height:100%;但如果右边的内容一旦超出可视区域，左边的导航部分就不会跟着拉伸（因为没有足够多的内容来撑开），因为不管是html或者是body,设置了height:100%之后也只是获得窗口可视区域的高度而已，所有被它们包裹的元素只要设置了height:100%，也都只获得了窗口可视区域的高度而已（这样反而有可能会截掉部分内容）。
但是，我发现在包裹左边部分和右边部分的外层div的高度其实是可以取决于高度大的那个部分的，就像最前面讲到的外层div的高度会根据内容而变化。所有关键就是获得内容多的那一部分的高度。
html
<div class="page"> <div class="left"> <ul> <li class="left_item"></li> <li class="left_item"></li> <li class="left_item"></li> <li class="left_item"></li> <li class="left_item"></li> <li class="left_item"></li> </ul> </div> <div class="right"> <div class="top"></div> <div class="main"> <ul id="list"> <li class="main_item"></li> <li class="main_item"></li> <li class="main_item"></li> <li class="main_item"></li> <li class="main_item"></li> <li class="main_item"></li> <li class="main_item"></li> <li class="main_item"></li> <li class="main_item"></li> <li class="main_item"></li> <li class="main_item"></li> <li class="main_item"></li> </ul> <div id="hide" class="hide"> <div><i id="close"class="btn">X</i></div> </div> </div> </div> </div>
css
*{margin: 0;padding: 0;}
html,body{width: 100%;}
/*page为外层div,要设置为相对定位*/
.page{
width:100%;
position: relative;
}
.page:after{
display: block;
content: "";
clear: both;
}
/*左边部分设置为绝对定位,设置min-height是为了防止右边内容很少时(高度小于可视区域高度),左边部分仍可铺满*/
.left{
background-color: #099082;
width: 20%;
position: absolute;
top: 0;
left: 0;
height: 100%;
min-height: 631px;
}
/*这里要注意，本来一般我会给右边也设置绝对定位，但是这样外层div就无法包裹这个部分的内容了，也就是外层的div的高度就不是实际内容的高度了（因为绝对定位之后脱离了文档流，所有父元素高度会坍塌），所以，右边的部分我采用了浮动来定位,这样就可以使外层div获得最大高度*/
.right{float:right;width: 80%;}
.top{
width:100%;
height: 60px;
border-bottom: 1px solid #ff0000;
}
.main{
width: 100%;
background-color: #ccc;
}
ul li{list-style: none;}
.left_item{width: 100px;height: 50px;border:1px solid #fff;margin:10px auto;}
.main_item{width: 80%;margin: 0 auto;margin-bottom:10px;height: 90px;background-color: #fff;border-radius: 5px;}
这样就可以解决高度自适应的问题了:当右边的高度大于或左边部分的时候，左边也会跟着拉伸。当右边部分内容小于左边的时候，由于左边设置了min-height，所以左边也会拉伸铺满整个屏幕。当然这样问题都出现在该div有背景颜色的时候。
我这样写还有一个问题，因为我这是基于右边部分没有被背景色的时候，如果有背景色的话，同样会因为左边高度高，但右边内容少无法铺满整个屏幕。所以，写了这么多，发现其实用css也是很麻烦。。。嗯，我下次研究一下怎么在模板化的代码中js。。所以浮动可以清除，position就没法清除。。是不是什么时候也给它出一个清除。。。
标签：
原文地址：http://www.cnblogs.com/tsngke/p/4793451.html
