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

Question

I have a question, my webpage has many div section and have multiple ul li. It is 2 column design and what i need to do is to set the same height for both corresponding div section. For example check the image, it is one section and what i want is to set the height for the shortest div and remove the large div content. Is this possible to do?

I checked on internet but what i am getting is to set the both column height but unable to find how can i remove the content.

The right image is what i want.

Please help :)

Answer 1

Assuming you're using jQuery, try this:

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

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

$targets.height( targetHeight );

This code will set the height of all matching elements to the height of the shortest member.

Just make sure all your target elements have the class awesomeClass , or whatever class you decide to use, and add an overflow: hidden; so the overflowing elements are cut off. This method will remain functional even if you decide to change the number of elements etc.

Answer 2

Say you have following two div 's on the page as:

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

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

You want both of them to have the same height ie the minimum out of the two. Well, its simple with following jQuery Code:

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

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

Of course you need to set Overflow-y:hidden, for the div and ul , so the scroll bar doesn't appear.

It's better to set explicit height, then to remove html elements

Answer 3

Removes elements until the first div height is less than or equal to the second one:

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