Question

我想平等地匹配左右div高度。

这是代码。

HTML，

<div id="base">
            <div id="leftleft">
                left
                <br/>
                I WANT THIS HEIGHT TO BE SAME AS RIGHT DIV
                <br/>
            </div>
            <div id="rightright">
                RIGHT DIV HEIGHT WILL BE
                <br/>
                CHANGED DYNAMICALLY BASED ON THE SERVER SIDE DATA.
                <br/>
                I WANT TO MATCH THE LEFT
                <br/>
                AND RIGHT DIV HEIGHT EQUALLY.
                <br/>
                right
                <br/>
                right
                <br/>
                right
                <br/>
                right
                <br/>
                right
                <br/>
                right
                <br/>
                right
                <br/>
                right
                <br/>

            </div>
        </div>

的CSS，

    #leftleft {
            float: left;
            background: #1B8BC6;
            width: 300px;
        }
        #rightright {
            float: left;
        }
        #base {
            height: 100%;
        }

拨弄，

http://jsfiddle.net/9Kwry/1/

有人可以给我建议吗？谢谢。

Answer 1

因此，您可以执行此操作display: table;，然后将divs设置为display: table-cell。所以左右都将是一样的。好老桌！

CSS：

#leftleft {
    background: #1B8BC6;
    width: 100px;
    height: 100%;
    display: table-cell;
}
#rightright {
    display: table-cell;
}
#base {
    height: 100%;
    display: table;
}

DEMO HERE

Answer 2

JSFiddle Demo

<强> CSS

#leftleft {
    display:table-cell;
    background: #1B8BC6;
    width: 100px;
    height: 100%;
    }

#rightright {
display:table-cell;
}

#base{
height: 100%;
display:table;
}

Answer 3

使用jQuery，您可以使用 .height() ：

$('#leftleft').height($('#rightright').height());

<强> Updated Fiddle

实际上，最好使用带有display: table和display: table-cell的纯CSS，但如果您关心IE7等较旧的浏览器支持，那么jQuery将帮助您完成此任务。

Answer 4

JQuery的＆GT;

$(function(){
         var lh=parseFloat($("#leftleft").css("height").replace("px",""));
         var rh=parseFloat($("#rightright").css("height").replace("px",""));
          if(lh>rh){
                $("#rightright").css("height",lh+"px")
              }
           else{
                  $("#leftleft").css("height",rh+"px")
             }
});

我怎样才能匹配css高度左右div？

4 个答案:

CSS：