CSS+DIV布局，一个列宽影响另一个列宽，使总宽度自适应（CSS+DIV Layout, one column's width depend on the other's）_html/css_WEB-ITnose

一个客户说要用DIV+CSS布局，两列，其中导航列宽度不确定（由里面的TreeView控件确定），而与它并列的内容列宽度要做到自适应，也就是

内容列宽度+导航列宽==固定值（总宽度）

但是，内容列宽度 和 导航列宽 都没有一个定值，而网上的大多自适应列宽代码都是基于一个定值的

无奈，我写Winform出身的对CSS+DIV知之甚少，只能通过JavaScript来完成了，效果还可以，IE7.0和Firefox2.0测试通过

下面的代码中，导航列没有定义宽度，其实际宽度要靠里面的内容而确定：

效果图，右边为导航列（不习惯吧，呵呵，客户阿拉伯的）：

title >

window.onload = function (){
document.getElementById( " left " ).style.width = ( 773 - (document.getElementById( " right " ).clientWidth)) + " px " ;
}
script >

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 >


header with height of 60px
div >





put your tree here p >
div >
div >


the width of this div is dependent on the right div
left
left
left
left

div >
div >
div >
div >

footer
div >
body >
html >

另外，修改之前的原始代码是我收藏的，好像网上copy很多，也不知道哪里才是原始出处了，尽管做了扩充和修改，但还是应该注明一下，如是您是原作者，请联系我[e-mail]