使列高相同并删除额外的内容

Question

我有一个问题，我的网页有很多div部分，并且有多个ul li。 它是2列设计，我需要做的是为相应的div部分设置相同的高度。 例如检查图像，它是一个部分，我想要的是设置最短div的高度并删除大div内容。这可能吗？

我在互联网上查了但是我得到的是设置两个列的高度，但无法找到我如何删除内容。

正确的形象是我想要的。

请帮助：）

Answer 1

假设你正在使用jQuery，试试这个：

var $targets = $('.awesomeClass'),
    targetHeight = $targets.first().height();

$targets.each(function() {
    var $this = $(this);
    if( $this.height() < targetHeight ) {
        targetHeight = $this.height();
    }
});

$targets.height( targetHeight );

此代码将所有匹配元素的高度设置为最短成员的高度。

确保所有目标元素都具有类awesomeClass或您决定使用的任何类，并添加overflow: hidden;以便溢出元素被截断。即使您决定更改元素数量等，此方法仍将继续有效。

Answer 2

假设您在页面上跟随两个div：

<div class="left">
<ul>/<ul>
</div>

<div class="right">
<ul></ul>
</div>

您希望它们两者具有相同的高度，即两者中的最小值。 嗯，简单的跟随jQuery代码：

var leftHeight = $(".left").height();
var rightHeight = $(".right").height();

if(leftHeight > rightHeight)
{
$(".left").height(rightHeight);
}
else
{
$(".right").height(leftHeight);
}

当然，您需要为div和ul设置Overflow-y：hidden，因此不会显示滚动条。

最好设置显式高度，然后删除html元素

Answer 3

删除元素，直到第一个div高度小于或等于第二个div：

while($('#div1').height() > $('#div2').height()) {
    $('#div1').find('li:last-child').remove();
}