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很多，也不知道哪里才是原始出处了，尽管做了扩充和修改，但还是应该注明一下，如是您是原作者，请联系我blodfox777@hotmal.com