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());
}

这样，即使左边的长度看起来比右边长，也总是有相同的高度。

Answer 2

我认为...... Jquery可以使用，如下所示更容易＆GT;

$（function（）{

        var h = $('#rightmain').height();
        $('#leftmain').css("height", h);
    });

Answer 3

您可以使用表格。或者JavaScript。

JS示例（使用jQuery）：

$(function(){
    var rightMainHeight = $('#rightmain').height();
    $('#leftmain').height(rightMainHeight);
});

Answer 4

试试这个：

var maxHeight = 0;

$('.col').each(function() {
    if($(this).height() > maxHeight ) {
        maxHeight = $(this).height();
    };
});

$('.col').height(maxHeight);

以这个小提琴为例：http://jsfiddle.net/buyC9/51/

CSS如何获得相同的高度？

4 个答案: