高分求助，很长时间没有解决的div难题：

本帖最后由 sonaXH 于 2011-05-12 00:22:46 编辑

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>三栏等高(wwww.hemin.cn)</title>
    <style type="text/css">
    *{ margin:0; padding:0; font-size:18px; font-family:"新宋体";}
    body {min-width: 850px;width:expression((documentElement.clientWidth < 850) ? "850px" : "auto" ); }
    .Top{background:#999; height:100px;}
    .Middle,.Left,.Right{ float:left;padding-bottom: 32767px;margin-bottom:-32767px;}
    .Content{ overflow:hidden;padding:0 250px 0 300px; zoom:1;position:relative;}
    .Middle{background:#090;width:100%;}
    .Left{background:#333;width:300px;margin-left:-100%; position:relative; right:300px;_left:250px;}
    .Right{background:#666;width:250px;margin-right:-100%;}
    </style>
    </head>
    <body>
    <div class="Top">顶部</div>
    <div class="Content">
    <div class="Middle">中间</div>
    <div class="Left">左边</div>
    <div class="Right">右边<br /><br /><br /></div>
    </div>
    </body>
    </html>
      

  2.   

    // 用jquery, 很好的实现了
    // 引用JS就不说了
    <script type="text/javascript">
     if($("#div1").height()-$("#div2").height()<0){
       $("#div1").css({height:$("#div2").height()});
      }
     else{
       $("#div2").css({height:$("#div1").height()});
      }
     </script>
      

  3.   

    没看清, 还有要求,以后哪个DIV增加了高度, 就这样再执行一遍刚刚发的JS就可以咯
      

  4.   

    1楼、2楼很精彩~赞一个。
    凑个热闹：
    <body>
    <input type=button value='测试' onclick="$('div1').style.height=50+'px';$('div2').style.height=100+'px';">
      <div id='c' style="width:300px; background:gray;" >
        <div id="div1" style="width:100px ;float:left;background: red;">
          <p>简单的两列div并排：我的要求：在页面加载结束后 执行js 使得div1和idv2 的高度相同 （div1和div2都有背景颜色 那么执行js以后两列长度将相等）。如果以后div1或者div2的内容有扩充 那么以div高度高的那个为标准。整个大的div也需要扩充。
    一直搞不清楚ie跟ff在元素高度之间的换算差。所以请知道的大侠不吝赐教。</p>
          <ul>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
          </ul>
        </div>
        <div id="div2" style="width:100px ;float:right;background: red;">
          <p>nasjcbkadsjbcdshvbdshvbakshdvbahfvba,shdbvkshbvhfbv
             asdc bkafffffdskjbavsmndv dfhnvamdsv fmnv amndfv manf
             ad lcjkannnfvamdsvnfm v,am v,maf v,, afv,am dsv,mf va
          </p>
          <p>ncjkbavjkdsbvkjfadvbkadjfvbkaehfvbkaehfrvberkhvbek</p>
        </div>
        <div style='clear:both'></div>
      </div>  
    </body>
    <script>
    function $(id){return document.getElementById(id)}
    function setHeight(){
      var hMax=Math.max($("div1").offsetHeight,$("div2").offsetHeight);
      if($("div1").offsetHeight<hMax)$("div1").style.height=hMax+'px';
      if($("div2").offsetHeight<hMax)$("div2").style.height=hMax+'px';
    }
    setInterval('setHeight()',100)
    </script>
      

  5.   

    这个方法很好。但是我想知道.Middle,.Left,.Right{ float:left;padding-bottom: 32767px;margin-bottom:-32767px;}为什么加了padding-bottom 和 margin-bottom 就可以实现效果了呢。 
      

  6.   

    1楼的布局要慎用，确保这个布局不会影响到你对内部元素的操作。
    原理方面，对于内容最高的那个元素，padding-bottom把这个元素高度撑为了 32768px+内容本身的高度，然后用margin-bottom将多出的部分（32768px）隐藏起来（因为父元素有overflow:hidden）。
    相对于其他的元素，内容达不到高度，但是由于padding-bottom的存在，使背景可以继续渲染，只要内容落差没有超过32768px，就不会显出没有渲染到的地方。也就是说，你看到的空白部分实际上是padding部分的内容。下面这个例子更清晰展示了它的原理与效果。
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>三栏等高(wwww.hemin.cn)</title>
    <style type="text/css">
    *{ margin:0; padding:0; font-size:18px; font-family:"新宋体";}
    body {min-width: 850px;width:expression((documentElement.clientWidth < 850) ? "850px" : "auto" ); color:#fff;}
    .Top{background:#999; height:100px;}
    .Middle,.Left,.Right{ float:left;padding-bottom: 100px;margin-bottom:-100px;}
    .Content{ overflow:hidden;padding:0 250px 0 300px; zoom:1;position:relative;}
    .Middle{background:#090;width:100%;}
    .Left{background:#333;width:300px;margin-left:-100%; position:relative; right:300px;_left:250px;}
    .Right{background:#666;width:250px;margin-right:-100%;}
    </style>
    </head>
    <body>
    <input id="add" value="添加内容" type="button"/>
    <input id="show" value="显示高度" type="button"/>
    <div class="Top">顶部</div>
    <div class="Content">
        <div class="Middle" id="middle">中间</div>
        <div class="Left" id="left">左边</div>
        <div class="Right" id="right">右边<br /></div>
    </div>
    <script type="text/javascript">
    var $ = function(str){return document.getElementById(str);};
    var left = $('left');
    var middle = $('middle');
    var right = $('right');
    var add = $('add');
    var show = $('show');
    add.onclick = function(){
    right.innerHTML += '右边<br />';
    }
    show.onclick = function(){
    alert('高度：\nleft:'+left.offsetHeight+'\nmiddle:'+middle.offsetHeight+'\nright:'+right.offsetHeight);
    }</script>
    </body>
    </html>
      

  7.   

    看了那么多。都写的不错。建议LZ在包含两个列的DIV上加个ID然后获取这个dIV的高度然后再将左边跟右边的高度都设置成你这个总ＤＩＶ的高度就可以了！
      

  8.   

    下面按钮实现楼主想要的效果，自己把它改成在内容发生变化时进行调用就可以了：<script type="text/javascript">
    function div内容变化时可以调用本函数() {
    document.getElementById("div1").style.height=document.getElementById("div2").style.height=Math.max(document.getElementById("div1").offsetHeight,document.getElementById("div2").offsetHeight);
    }
    </script>
    <body>
    <div style="width:300px; background:gray;border:1 solid blue;">
      <div id="div1" style="width:100px ;float:left;background: red;overflow:hidden;">
          <p>nasjcbkadsjbcdshvbdshvbakshdvbahfvba,shdbvkshbvhfbv
          asdc bkafffffdskjbavsmndv dfhnvamdsv fmnv amndfv manf
          ad lcjkannnfvamdsvnfm v,am v,maf v,, afv,am dsv,mf va</p>
          <ul>
              <li>a</li>
              <li>a</li>
              <li>a</li>
              <li>a</li>
          </ul>
      </div>
      <div id="div2" style="width:100px ;float:right;background: green;overflow:hidden;">
          <p>nasjcbkadsjbcdshvbdshvbakshdvbahfvba,shdbvkshbvhfbv
          asdc bkafffffdskjbavsmndv dfhnvamdsv fmnv amndfv manf
          ad lcjkannnfvamdsvnfm v,am v,maf v,, afv,am dsv,mf va</p>
          <p>
              ncjkbavjkdsbvkjfadvbkadjfvbkaehfvbkaehfrvberkhvbek
          </p>
      </div>
    </div>
    <input type="button" onclick="div内容变化时可以调用本函数();" value="div内容变化时可以调用本函数">
      

  9.   

    style="height:auto"设置一下，不是会自动撑大吗