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]

你可能感兴趣的:(css+div)