javascript - 使列高相同并删除多余的内容

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

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

只需确保您的所有目标元素都具有 classawesomeClass或您决定使用的任何类，然后添加一个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);
}

当然你需要为divand设置 Overflow-y:hidden,ul这样滚动条就不会出现。

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

Answer 3

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

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