none
请问如何使左右并排的2个DIV的高度始终一致? RRS feed

  • 问题

  • 2个DIV,left和right.它们的高度都会发生变化。而且left的背景是个图片。
    当它们的高度放生变化时,会出边左右的高度不一致,影响美观。
    在网上找过多种方法,很多时候高度变大的时候能一致,但是高度变小的时候就不行了。
    请问如何让它们的高度始终保持一致?
    • 已移动 Sheng Jiang 蒋晟 2009年9月18日 16:04 客户端脚本问题 (发件人:ASP.NET 与 AJAX)
    2009年9月18日 9:26

答案

  • 你好,你可以设置在一个 div 改变大小的时候另外一个 div 同时改变大小
    ----------------------------------------------------------------------
    <div id="div1" onresize="ChangeSize('div1','div2');" style="width:200px; height:200px; background-color:Blue">
    </div>
    <div id="div2" onresize="ChangeSize('div2','div1');" style="width:200px; height:200px; background-color:Green">
    </div>
    <input type="button" value="更变 Div 1 大小" onclick="document.getElementById('div1').style.width='500px';"/>
    <input type="button" value="更变 Div 2 大小" onclick="document.getElementById('div2').style.width='100px';"/>
    <script type="text/javascript">
        function ChangeSize(sourceId, targetId) {
            document.getElementById(targetId).style.width = document.getElementById(sourceId).style.width;
            document.getElementById(targetId).style.height = document.getElementById(sourceId).style.height;
        }
    </script>


    知识改变命运,奋斗成就人生!
    • 已标记为答案 黄昏 2009年9月19日 8:18
    2009年9月18日 9:58
    版主
  • 参考例子

    <div >
        
        
        <div id ="li1" style=" float :left ; width :250px; background-image:url('Left_bg.png');" >
        </div>
       
        <div id="li2" style=" float :left ;width :550px;" >
            <asp:Image ID="Image1" runat="server" ImageUrl="1.bmp" />
        </div>
        
        
        <script language="javascript" type="text/javascript">
            window.onload = function() {
                document.getElementById("li1").style.height = document.getElementById("li2").offsetHeight + "px";

            }
       
        </script>
        </div>

    • 已标记为答案 黄昏 2009年9月19日 8:18
    2009年9月18日 10:29
  • 应该判断2个中的最大值,然后将另外一个设置相同的高度
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    </head>
    <body>
    <div id="div1" style="width:200px; background-color:Blue;float:left;">得到
    </div>
    <div id="div2" style="width:200px; background-color:Green;float:left;">测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>
    </div>
    <script>
    var h=document.getElementById("div1").offsetHeight > document.getElementById("div2").offsetHeight?document.getElementById
    
    ("div1").offsetHeight:document.getElementById("div2").offsetHeight
    document.getElementById("div1").style.height = document.getElementById("div2").style.height = h+"px"
    </script>
    </body>
    </html>


    【孟子E章】
    • 已标记为答案 黄昏 2009年9月19日 8:18
    2009年9月18日 13:04
    版主

全部回复

  • 你好,你可以设置在一个 div 改变大小的时候另外一个 div 同时改变大小
    ----------------------------------------------------------------------
    <div id="div1" onresize="ChangeSize('div1','div2');" style="width:200px; height:200px; background-color:Blue">
    </div>
    <div id="div2" onresize="ChangeSize('div2','div1');" style="width:200px; height:200px; background-color:Green">
    </div>
    <input type="button" value="更变 Div 1 大小" onclick="document.getElementById('div1').style.width='500px';"/>
    <input type="button" value="更变 Div 2 大小" onclick="document.getElementById('div2').style.width='100px';"/>
    <script type="text/javascript">
        function ChangeSize(sourceId, targetId) {
            document.getElementById(targetId).style.width = document.getElementById(sourceId).style.width;
            document.getElementById(targetId).style.height = document.getElementById(sourceId).style.height;
        }
    </script>


    知识改变命运,奋斗成就人生!
    • 已标记为答案 黄昏 2009年9月19日 8:18
    2009年9月18日 9:58
    版主
  • 参考例子

    <div >
        
        
        <div id ="li1" style=" float :left ; width :250px; background-image:url('Left_bg.png');" >
        </div>
       
        <div id="li2" style=" float :left ;width :550px;" >
            <asp:Image ID="Image1" runat="server" ImageUrl="1.bmp" />
        </div>
        
        
        <script language="javascript" type="text/javascript">
            window.onload = function() {
                document.getElementById("li1").style.height = document.getElementById("li2").offsetHeight + "px";

            }
       
        </script>
        </div>

    • 已标记为答案 黄昏 2009年9月19日 8:18
    2009年9月18日 10:29
  • 应该判断2个中的最大值,然后将另外一个设置相同的高度
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    </head>
    <body>
    <div id="div1" style="width:200px; background-color:Blue;float:left;">得到
    </div>
    <div id="div2" style="width:200px; background-color:Green;float:left;">测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>测试<br/>
    </div>
    <script>
    var h=document.getElementById("div1").offsetHeight > document.getElementById("div2").offsetHeight?document.getElementById
    
    ("div1").offsetHeight:document.getElementById("div2").offsetHeight
    document.getElementById("div1").style.height = document.getElementById("div2").style.height = h+"px"
    </script>
    </body>
    </html>


    【孟子E章】
    • 已标记为答案 黄昏 2009年9月19日 8:18
    2009年9月18日 13:04
    版主