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 >

 

 

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