两列自适应高度技巧汇总！

admin

方法一：
最简单的方法
<div class="line1 autoheight"></div>
<div class="line2 autoheight"></div>
CSS:
.line1{float:left;}
.line2{overflow:hidden;}/*overflow:hidden也可以换成float:left*/
.autoheight{margin-bottom:-10000px;padding-bottom:10000px;}

方法二：
<div class="box">
<div class="left">
个人资料<br>
<a href="#">基本信息</a><br>
<a href="#">修改头像</a><br>
<a href="#">帐号绑定</a><br>
<a href="#">个性签名</a>
</div>
<div class="right">
<h1>这个是有使用position绝对定位属性，所以左边的导航栏高度会随着父容器高度而变化</h1>
<h1>这个是有使用position绝对定位属性，所以左边的导航栏高度会随着父容器高度而变化</h1>
<h1>这个是有使用position绝对定位属性，所以左边的导航栏高度会随着父容器高度而变化</h1>
</div>
<div class="clear"></div>
</div>
CSS:
.clear{ clear:both;}
.box{ width:960px; margin:20px auto; height:auto; background-color:#FFFFFF; position:relative;}
.left{ width:160px; height:100%; background-color:#fafafa; position:absolute; top:0px; left:0px;}
.right{ width:800px; height:auto; float:right;}
.right h1{ display:block; text-align:center; line-height:100px; font-size:14px; font-weight:100;}

方法三：
敬请期待。