css中div高度自适应
css中div高度自适应li高度自适应是个值得研究的问题，本文向大家介绍一些关于li高度自适应的技巧，希望对你的学习有所帮助。
一、高度的自适应（父li高度随子li的高度改变而改变）
1、如果父li不定义height、子li均为标准流的时候，父li的height随内容的变化而变化,实现父li高度随子li的高度改变而改变。
<style type="text/css">
#aa{ border:#000000 solid 5px}
#bb{border:#00ffff solid 5px;}
#cc{ border:#0033CC solid 5px}
</style>
<li id="aa">父li
<li id="bb">子li</li>
<li id="cc">子li</li>
</li>
#aa2、如果父li定义height,子li均为标准流的时候，在IE下父li的height随内容变化而变化，ff中则固定大小，如父li设置height:50px
<style type="text/css">
#aa{ border:#000000 solid 5px;height:50px}
#bb{border:#00ffff solid 5px;}
#cc{ border:#0033CC solid 5px}
</style>
<li id="aa">父li
<li id="bb">子li</li>
<li id="cc">子li</li>
</li>
3、如果子li使用了float属性，此时已经脱离标准流，父li不会随内容的高度变化而变化，解决的办法是在浮动的li下面，加一个空li，设置clear属性both
<style type="text/css">
#aa{ border:#000000 solid 5px;}
#bb{border:#00ffff solid 5px;float:left}
#cc{ border:#0033CC solid 5px;float:left}
</style>
<li id="aa">父li
<li id="bb">子li</li>
<li id="cc">子li</li>
<li style="clear:both"></li>
</li>
二、高度的自适应（子li高度随父亲li高度改变而改变）
在有边框的情况下，你会发现同一个li,在ie下的高度和在FF下的高度是不一样的，比如你设置了高度为100px的li，边框是border:5px;IE的高度是5+5+空白区域=100px，而FF下高度是100px的li是不包括高度的，只是空白区域的高度。
<style type="text/css">
#aa{ border:#000000 solid 5px;height:100px;}
#bb{border:#00ffff solid 5px;float:left; height:100%}
#cc{ border:#0033CC solid 5px;float:left}
</style>
<li id="aa">
<li id="bb">子li</li>
<li id="cc">子li</li>
</li>如果没有设置边框，完全没有高度不一致的情况，子li适应父li很简单，如上面代码，只是在子li加了height:100%属性即可。
有一点要注意，如果父li是body的话，也就是说一个body套了一个li，让li适合body的大小的，必须设置body的高度才能实现子li随body改变而改变，body{height:100%}
三、加背景图片实现。
/*这个方法，很多大网站在使用，如163，sina等。*/
/*XHTML代码：*/
<li id="wrap">
<li id="column1">这是第一列</li>
<li id="column1">这是第二列</li>
<li class="clear"></li>
</li>
/*CSS代码:*/
#wrap{width:776px;background:url(bg.gif)repeat-y300px;}
#column1{float:left;width:300px;}
#column2{float:right;width:476px;}
.clear{clear:both;}