[Solved] Setting equal height of DIVs inside their container?

[barkins]

Does anyone have a definitive go-to for setting equal height of divs based on the container they’re in?

Been searching the web, the only thing that may work is Flexbox? Anything else out there? Particularly for a responsive designed website.

Thank you

[TheDutchCoder]

Hey @barkins

I think flexbox is the only “real” solution in this case, although (depending on your needs), using display: table; and display: table-cell; could help you out as well.

What are your specific needs?

[barkins]

Thanks @TheDutchCoder

I went with Flexbox in the end. It seems to be working well for my design.

[TheDutchCoder]

Awesome!

Just keep in mind its support is fairly limited: http://caniuse.com/#search=flex
But other than that, go for it! It’s the only way to push the web forward ;-)

Cheers!

[r00t]

Just use the function that I wrote here (jQuery):

$.fn.equalHeights = function(px) {
    var currentTallest = 0;
    $.each($(this), function(i, v) {
        if ($(v).outerHeight() > currentTallest) {
            currentTallest = $(v).outerHeight();
        }
        return true;
    });
    $.each($(this), function(i, v) {
        $(v).css({
            "height": currentTallest
        });
        return true;
    });
}

Then use:
$('#container').equalHeights();

Way better than Flexbox at this point (due to its limited support).

[barkins]

Thanks @r00t

Awesome, will give it a shot. Does it work well in a responsive design?

[r00t]

Yeah, with an additional snippet of code:
$(window).on(‘resize’,function(){
$(‘#container’).equalHeights();
});

[Paulie_D]

I think it would need anonresize function to make it responsive.

[r00t]

There is no onresize function.
There’s resize() and on('resize');, hence my previous post.

[Paulie_D]

Did you notice the posting times?

I was typing mine as you typed yours however I think we both made the same point. Please forgive me for the typo.

[Author]

Posts