zoukankan      html  css  js  c++  java
  • (转)Div左右两侧等高

    . 利用背景图,做出左右等高的模拟效果  

    这种方法不是真正的左右等高,而是在外框元素中添加一张背景图片,当内容增多时,背景会纵向重复,就会形成左右等高的效果。 

    这种方法不是真正的div自动等高,而是在左右两个div的外面添加一个外框元素,给这个外框元素添加一个背景,当内容增多时,背景就会向下纵向重复,看起来就向左右两个div都自动向下延伸了一样。下面写一下详细代码。

    Html代码: 

    <div id="wrap">

           <div id="left_a">

                  <p>http://Dreamweaver.abang.com</p><p>http://Dreamweaver.abang.com</p>

                  <p>http://Dreamweaver.abang.com</p><p>http://Dreamweaver.abang.com</p>

                  <p>http://Dreamweaver.abang.com</p><p>http://Dreamweaver.abang.com</p>

                  <p>http://Dreamweaver.abang.com</p><p>http://Dreamweaver.abang.com</p>

                  <p>http://Dreamweaver.abang.com</p>

           </div>

           <div id="right_a">

                  <br /> <br />

                  <br /> <br />

                  <br /> <br />

           </div>

           <div class="clear"></div>

    </div>

     

    CSS代码: 

    *{margin:0;     padding:0;}

    #wrap{

           950px;

           height:100%;

           clear:both;    

           margin:0 auto;

           background:#FFF url(background.gif) repeat;

    }

    #left_a { float:left; 190px; }

    #right_a { float:right;    750px; }

    .clear { clear:both; }

     

     对以上代码的解释: 

    1、在Html代码中,<div id="wrap">这行是外面容器的开始,在CSS中用background给它定义一个背景;

    2、给wrap定义背景的时候要注意,这里定义的总宽度是950像素,左侧边栏是190像素,右侧是750像素,两者中间有10像素的空白,制作背景图时应按照此尺寸制作,左侧190像素是一个颜色,右侧750像素是一个颜色,中间10像素白色。 

    3、由于这个布局采用的是float浮动布局的方式,两个div分别向左向右分布,很容易让浏览器解析时出现问题而检测不到高度,所以在CSS代码中,wrap的高度应定义为100%,并且使用clear方法清除浮动,让其在Firefox中也正常显示。 

     

    . 利用表格嵌套 

    这种方法就是在div中嵌套一个表格,因为表格是可以左右自动等高的,所以当一侧的内容增多时,两侧都会自动等高。 

    其实只要用表格布局做过页面,这个方法基本上大家都会,就是在div中嵌套表格。 

    原则上,使用div布局应尽量减少表格出现,但为了达到某些效果,稍稍的使用一些也是可以的,况且国外有些较有名的网站也使用了这种方法。下面讲解具体方法。 

    Html代码: 

    <div id="wrap">

    <table border="0" cellpadding="0" cellspacing="0" id="table_layout">

    <tr>

           <td id="left_b">

           <div class="box">

                  <p>http://Dreamweaver.abang.com</p><p>&nbsp;</p>

                  <p>http://Dreamweaver.abang.com</p><p>&nbsp;</p>

           </div>

                  <div class="box">

                         <p>http://Dreamweaver.abang.com</p><p>&nbsp;</p>

                         <p>http://Dreamweaver.abang.com</p>

                  </div>

           </td>

           <td id="mid_b">&nbsp;</td>

           <td id="right_b">

                  <div class="box">阿邦Dreamweaver专栏</div>

           </td>

    </tr>

    </table>

    </div>

     

    CSS代码: 

    * { margin:0; padding:0; }

    #wrap { 950px; height:100%; clear:both; margin:0 auto; background:#FFF; color:#FFF; }

    #table_layout { 950px; }

    #left_b { 190px; background:#09C; }

    #right_b { 750px; background:#09C; }

    #mid_b { 10px; }

    .box { clear:both; height:100%; }

     上面的代码是将表格嵌套在wrap这个div中,在这个table中又插入其它div,这样就可以让左右两列达到自动等高的效果。上面的代码大家应该都能看懂,如果有问题可以向我提问。

     

    . 利用内、外补丁padding和margin自动等高 

           这种方法是利用正内补丁和负外补丁相结合,再隐藏掉溢出的内容,最终达到左右等高的效果。 

           具体理论不再多说了,只要把代码给大家列出来就能一目了然了。 

    Html代码: 

    <div id="wrap">

           <div id="left">

                  <br /><br />

           </div>

           <div id="right">

                  http://Dreamweaver.abang.com <br />

                  <br /> <br /> <br />

                  阿邦Dreamweaver专栏 <br /> <br />

                  <br /> <br />

           </div>

    </div>

     

    CSS代码:

    * { margin:0; padding:0; }

    #wrap{ overflow:hidden; padding:0; padding-left:180px; }

    #left,#right{ height:auto; margin-bottom:-10000px; padding-bottom:10000px; }

    #left{ display:inline; float:left; 180px; margin-left:-180px; background: #0CF; }

    #right{ float:right; 100%; background: #FC6; }

    个人优化,div自适应宽度css代码:

    * { margin:0; padding:0; }

    #wrap{ overflow:hidden; padding:0; }

    #left,#right{ height:auto; margin-bottom:-10000px; padding-bottom:10000px; }

    #left{ display:inline; float:left; 180px; background: #0CF; }

    #right{ background: #FC6; overflow: hidden; }

     

    对以上代码的部分解释: 

    1、最外面的wrap必须使用overflow:hidden来隐藏溢出的内容。 

    2、wrap的左内补丁设置为180像素是为了让left这个div有空间显示。 

    3、left和right两个div底部外补丁为-10000px,底部内补丁为10000px,这是必须设置的,如果内容可能会较多,可以将数值再增大。 

    4、left这个div居左,right居右,display:inline属性是为了修正left在IE6中会跑出外框的bug。

     

    . 利用Javascript脚本 

    Javascript是最好的Html辅助程序,尤其是前端界面的开发,在自动等高方面,也有专业的脚本。

    网上使div等高的Javascript脚本很多,但有些仅仅针对IE浏览器可用,对Firefox、Opera等浏览器无效,所以在选择脚本的时候应该特别注意脚本的跨浏览器兼容性。 

    下面给大家介绍一个从网上找来的Javascript脚本,并列出使用方法。 

    Html代码:

    <div class="div_top">

           这是顶部的div

    </div>

    <div id="Div1" class="div_left">

           左部div <br />

           http://Dreamweaver.abang.com <br /><br />

           <br /><br />

           <br /><br />

    </div>

    <div id="Div2" class="div_right">

           右部div <br/> http://Dreamweaver.abang.com <br/>

    </div>

    <div class="div_bottom">

           这是底部的DIV

    </div>

     

    CSS代码:

    * { margin:0px; padding:0px; }

    .div_top{ 100%; background:#FCC; }

    .div_bottom{ 100%; background:#FFC; }

    .div_left{ position:absolute; 200px; background:#FE2; }

    .div_right{ margin-left:200px; background:#0CF; }

     

    Javascript代码:

    <script>

    function P7_colH(){

           var i,oh,hh,h=0,dA=document.p7eqc,an=document.p7eqa;

           if(dA&&dA.length){

                  for(i=0;i<dA.length;i++){

                         dA[i].style.height='auto';

                  }

                  for(i=0;i<dA.length;i++){

                         oh=dA[i].offsetHeight;h=(oh>h)?oh:h;

                  }

                  for(i=0;i<dA.length;i++){

                         if(an){

                                dA[i].style.height=h+'px';

                         }

                         else{

                                P7_eqA(dA[i].id,dA[i].offsetHeight,h);

                         }

                  }

     

           if(an){

                  for(i=0;i<dA.length;i++){

                         hh=dA[i].offsetHeight;

                         if(hh>h){

                                dA[i].style.height=(h-(hh-h))+'px';

                         }

                  }

           }else{

                  document.p7eqa=1;

           }

                  document.p7eqth=document.body.offsetHeight;

                  document.p7eqtw=document.body.offsetWidth;

           }

    }

     

    function P7_eqT(){

           if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw!=document.body.offsetWidth){

                  P7_colH();

           }

    }

     

    function P7_equalCols(){

           if(document.getElementById){

                  document.p7eqc=new Array;

                  for(i=0;i<arguments.length;i++){

                         document.p7eqc[i]=document.getElementById(arguments[i]);

                  }

                  setInterval("P7_eqT()",10);

           }

    }

     

    function P7_eqA(el,h,ht){

           var sp=10,inc=10,nh=h,g=document.getElementById(el),oh=g.offsetHeight,ch=parseInt(g.style.height);

           ch=(ch)?ch:h;

           var ad=oh-ch,adT=ht-ad;

           nh+=inc;

           nh=(nh>adT)?adT:nh;

           g.style.height=nh+'px';

           oh=g.offsetHeight;

           if(oh>ht){

                  nh=(ht-(oh-ht));g.style.height=nh+'px';

           }

           if(nh<adT){

                  setTimeout("P7_eqA('"+el+"',"+nh+","+ht+")",sp);

           }

    }

    </script>

    以上Html、CSS、Javascript三部分代码齐备后,还需要在网页的body标签处加入一行代码onload="P7_equalCols('Div1','Div2')",

    变成<body onload="P7_equalCols('Div1','Div2')">, 其中Div1对应的是左侧div的id,Div2对应的是右侧的id

    如果是三列布局,可以再自己增加内容,变成 <body onload="P7_equalCols('Div1','Div2','Div3')">

    将以上代码复制到网页文件中,即可实现div自动等高的效果了。

    阿邦Dreamweaver专栏 

  • 相关阅读:
    BZOJ 1977: [BeiJing2010组队]次小生成树 Tree( MST + 树链剖分 + RMQ )
    BZOJ 2134: 单选错位( 期望 )
    BZOJ 1030: [JSOI2007]文本生成器( AC自动机 + dp )
    BZOJ 2599: [IOI2011]Race( 点分治 )
    BZOJ 3238: [Ahoi2013]差异( 后缀数组 + 单调栈 )
    ZOJ3732 Graph Reconstruction Havel-Hakimi定理
    HDU5653 Bomber Man wants to bomb an Array 简单DP
    HDU 5651 xiaoxin juju needs help 水题一发
    HDU 5652 India and China Origins 并查集
    HDU4725 The Shortest Path in Nya Graph dij
  • 原文地址:https://www.cnblogs.com/yanglian/p/3835363.html
Copyright © 2011-2022 走看看