CSS如何获得相同的高度？

Question

我的 html:

<div id="wrap">
<div id="main">
<div id="rightmain">
            <h1>asdasdasdasd</h1>
            <h1>asdasdasdasd</h1>
            <h1>asdasdasdasd</h1>
            <h1>asdasdasdasd</h1>
            <h1>asdasdasdasd</h1>
            <h1>asdasdasdasd</h1>

</div>
<div id="leftmain">
    <div style=" background:blue;height:20px;width:190px;border:1px solid black;display:block;">
        <h1>asdasdasdasd</h1>
    </div>
</div>
    </div>

CSS:

#main {position: relative;}
#rightmain { float: right;
    width: 768px;border:1px solid black;}
#leftmain {    position: relative;
    width: 160px;}

#wrap {    position: relative;
    width: 960px;}

这是我的 JSFiddle:http://jsfiddle.net/buyC9/51/

如何获得与#rightmain div 相同的八个#leftmain div？

#rightmain div 的高度各不相同，因此我无法将高度定义为例如 400px。

Answer 1

要为两者设置相同的高度，请使用 jQuery 中的 .height()。

if ($('#leftmain').height() > $('#rightmain').height()) {
    $('#rightmain').height($('$leftmain').height());
} else {
    $('#leftmain').height($('#rightmain').height());
}

这样你将始终保持相同的高度，即使左边的长看起来比右边的长。