等高布局相關：《padding和margin配合等高布局，側邊欄等高布局方法》而本文介紹的是使用position來實現多欄等高自適應布局！
直接上圖，左側菜單只是顯示部分，右側的高度隨時可能變化，要求：左側欄的高度也跟隨右側欄一起變化！
方法：position:absolute; top:0; bottom:0;
使用position:absolute; 去定義頂部距離、底部距離，就可以讓整個div的高度自適應了。
完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>左側欄高度自適應</title>
<style type="text/css">
#wrap .wrap{ margin-top: 20px; margin-bottom: 20px; overflow: hidden; position: relative;}
.left_warp{width: 137px; float: left; border: 1px solid #ededed; background-color: #fafafa;
padding: 0 13px;font-size: 14px;
bottom:0; overflow:auto;
position:absolute; top:0; bottom:0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left_warp">
<ul>
<li><a href="#" class="on">個人主業</a></li>
<li><a href="#">修改密碼</a></li>
<li><a href="#">PID密碼</a></li>
<li><a href="#">我的推廣</a></li>
<li><a href="#">我要放單</a></li>
<li><a href="#">我的商品</a></li>
</ul>
</div>
<div class="right_warp">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</body>
</html>
之前不知道如何寫，是參考以下代碼學習到的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度自適應布局</title>
<style>
html,body{ height:100%;}
body,div{ margin:0; padding:0; color:#F00;}
* html{ padding-top:100px;}/*for ie6*/
.top{ background:#36C; height:100px;}
* html .top{ background:#36C; height:100px; position:absolute; top:0; width:100%;}/*for ie6*/
.main{ background:#F90; position:absolute; width:100%; top:100px; bottom:0; overflow:auto;}
* html .main{ background:#F90; position:static; height:100%;}/*for ie6*/
</style>
</head>
<body>
<div class="top">我是top，固定高度</div>
<div class="main">我是main，高度隨瀏覽器大小變化而變化<p style="height:500px;"></p></div>
</body>
</html>