您好,欢迎访问一九零五行业门户网

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
其它类似信息

推荐信息