CSS+DIV布局，一个列宽影响另一个列宽，使总宽度自适应（CSS+DIV Layout, one column's width depend on the other's）
一个客户说要用DIV+CSS布局，两列，其中导航列宽度不确定（由里面的TreeView控件确定），而与它并列的内容列宽度要做到自适应，也就是
内容列宽度+导航列宽==固定值（总宽度）
但是，内容列宽度 和 导航列宽 都没有一个定值，而网上的大多自适应列宽代码都是基于一个定值的
无奈，我写Winform出身的对CSS+DIV知之甚少，只能通过JavaScript来完成了，效果还可以，IE7.0和Firefox2.0测试通过
下面的代码中，导航列没有定义宽度，其实际宽度要靠里面的内容而确定：
效果图，右边为导航列（不习惯吧，呵呵，客户阿拉伯的）：
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function(){
document.getElementById("left").style.width=(773-(document.getElementById("right").clientWidth))+"px";
}
</script>
<style type="text/css">
body
{
background: #999;
text-align: center;
color: #333;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
}
#header
{
margin-right: auto;
margin-left: auto;
padding: 0px;
width: 776px;
background: #EEE;
height: 60px;
text-align: left;
}
#contain
{
margin-left: auto;
margin-right: auto;
width: 776px;
}
#mainbg
{
float: left;
padding: 0px;
width: 776px;
background: #60A179;
}
#right
{
float: right;
margin: 2px 0px 2px 0px;
padding: 0px;
background: #ccd2de;
min-height:300px;
_height:300px;
text-align: left;
}
#left
{
float: right;
margin: 2px 2px 0px 0px;
padding: 0px;
background: #F2F3F7;
width: 574px;
min-height:600px;
_height:600px;
text-align: left;
}
#footer
{
clear: both;
margin-right: auto;
margin-left: auto;
padding: 0px;
width: 776px;
background: #EEE;
height: 60px;
}
.text
{
margin: 0px;
padding: 20px;
}
</style>
</head>
<body>
<div id="header">
header with height of 60px
</div>
<div id="contain">
<div id="mainbg">
<div id="right">
<div class="text">
<p>
put your tree here</p>
</div>
</div>
<div id="left">
<div class="text">
the width of this div is dependent on the right div
left<br />
left<br />
left<br />
left<br />
</div>
</div>
</div>
</div>
<div id="footer">
footer
</div>
</body>
</html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function(){
document.getElementById("left").style.width=(773-(document.getElementById("right").clientWidth))+"px";
}
</script>
<style type="text/css">
body
{
background: #999;
text-align: center;
color: #333;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
}
#header
{
margin-right: auto;
margin-left: auto;
padding: 0px;
width: 776px;
background: #EEE;
height: 60px;
text-align: left;
}
#contain
{
margin-left: auto;
margin-right: auto;
width: 776px;
}
#mainbg
{
float: left;
padding: 0px;
width: 776px;
background: #60A179;
}
#right
{
float: right;
margin: 2px 0px 2px 0px;
padding: 0px;
background: #ccd2de;
min-height:300px;
_height:300px;
text-align: left;
}
#left
{
float: right;
margin: 2px 2px 0px 0px;
padding: 0px;
background: #F2F3F7;
width: 574px;
min-height:600px;
_height:600px;
text-align: left;
}
#footer
{
clear: both;
margin-right: auto;
margin-left: auto;
padding: 0px;
width: 776px;
background: #EEE;
height: 60px;
}
.text
{
margin: 0px;
padding: 20px;
}
</style>
</head>
<body>
<div id="header">
header with height of 60px
</div>
<div id="contain">
<div id="mainbg">
<div id="right">
<div class="text">
<p>
put your tree here</p>
</div>
</div>
<div id="left">
<div class="text">
the width of this div is dependent on the right div
left<br />
left<br />
left<br />
left<br />
</div>
</div>
</div>
</div>
<div id="footer">
footer
</div>
</body>
</html>
另外，修改之前的原始代码是我收藏的，好像网上copy很多，也不知道哪里才是原始出处了，尽管做了扩充和修改，但还是应该注明一下，如是您是原作者，请联系我blodfox777@hotmal.com
