CSS实现子级窗口高度随低级窗口高度变化及js控制左右容器高度一致

纯粹使用使用height:100%;或者height:auto;来定义内部容器自适应高度，都无法实现让内部容器高度随着外部父容器高度变化而变化，所以我们必需要使用position绝对定位属性来配合协助实现。

//.box{ 960px; margin:20px auto; height:auto; background-color:#FFFFFF; position:relative;} 
//.left{ 160px; height:100%; background-color:#fafafa; position:absolute; top:0px; left:0px;} 
//.right{ 800px; height:auto; float:right;} 

<!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{ 960px; margin:20px auto; height:auto; background-color:#FFFFFF; position:relative;} 
.left{ 160px; height:100%; background-color:#fafafa; position:absolute; top:0px; left:0px;} 
.left_wu{ 160px; height:100%; background-color:#fafafa; float:left;} 
.left h1,.left_wu h1{ 160px; height:30px; background-color:#67a727; text-align:center; line-height:30px; color:#FFFFFF; font-size:14px; margin-top:30px;} 
.nav{ 160px; height:auto; margin:12px 0px;} 
.nav a{ 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{ 800px; height:auto; float:right;} 
.right h1{ 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>

关于div自适应高度/左右高度自适应一致的js代码

$(function(){
    var heightLeft= $("#Left").height();
    var heightRight= $("#Right").height();
    if (heightLeft > heightRight)
    {
        $("#Right").height(heightLeft);
    }
    else
    {
        $("#Left").height(heightRight);
    }
    })