<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>MJBlog(mj.588cy.com)</title>
<style type="text/css">
* {margin:0;padding:0;font-size:12px;list-style:none;border:0;}
body{font-family: Arial, Helvetica, sans-serif; background-color:#edf0eb;}
a{ text-decoration:none;}
a:hover{ text-decoration:underline;}
.clear{ display:block; height:0px; line-height:0px; font-size:0px; 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;}
.left_wu{ width:160px; height:100%; background-color:#fafafa; float:left;}
.left h1,.left_wu h1{ width:160px; height:30px; background-color:#67a727; text-align:center; line-height:30px; color:#FFFFFF; font-size:14px; margin-top:30px;}
.nav{ width:160px; height:auto; margin:12px 0px;}
.nav a{ width:160px; height:30px; line-height:30px; text-align:center; display:block; color:#588c0e;}
.nav a:hover{ background-color:#ebebeb;}
.nav .a_dq{ color:#333333; background-color:#ebebeb; font-weight:bold;}
.right{ width:800px; height:auto; float:right;}
.right h1{ width:800px; height:500px; text-align:center; line-height:100px; font-size:14px; font-weight:100;}
</style>
</head>
<body>
<div class="box">
<div class="right">
<h1>這個是有使用position絕對定位屬性，所以左邊的導航欄高度會隨着父容器高度而變化</h1>
</div>
<div class="clear"></div>
<div class="left">
<h1>個人資料</h1>
<div class="nav">
<a href="#" class="a_dq">基本信息</a>
<a href="#">修改頭像</a>
<a href="#">帳號綁定</a>
<a href="#">個性簽名</a>
</div>
</div>
</div>
<div class="box">
<div class="left_wu">
<h1>個人資料</h1>
<div class="nav">
<a href="#" class="a_dq">基本信息</a>
<a href="#">修改頭像</a>
<a href="#">帳號綁定</a>
<a href="#">個性簽名</a>
</div>
</div>
<div class="right">
<h1>這個是沒有使用position絕對定位屬性，所以左邊的導航欄高度沒有隨着父容器高度而變化，視覺效果就會差點</h1>
</div>
<div class="clear"></div>
</div>
</body>
</html> 本方法主要的精髓在於父容器設置position:relative 左側子容器設置absolute height:100%，這樣就可以在父容器高度自適應的同時，左側容器的高度也能隨之改變，適用於左側導航，右側爲內容區 的情況。