Menu icon Foundation
Equal height rows

Hi,

I am new to foundation and have the following question:
I have 3 boxes in a row:

Is there a way that I can set them to use the all the same height?
Let's say, in box 1 is the more content as in box 2 and 3. But all should use the same height as box 1 needs?

Is there any possibility?
Thanks!

<div class="large-6 medium-12 columns">
<div class="large-3 medium-6 columns">
<div class="large-3 medium-6 columns">
            

         

equal heightRowsfeature request

Hi,

I am new to foundation and have the following question:
I have 3 boxes in a row:

Is there a way that I can set them to use the all the same height?
Let's say, in box 1 is the more content as in box 2 and 3. But all should use the same height as box 1 needs?

Is there any possibility?
Thanks!

<div class="large-6 medium-12 columns">
<div class="large-3 medium-6 columns">
<div class="large-3 medium-6 columns">
            

         
Armin Boß almost 6 years ago

That's currently not possible without javascript. Take a look at this helpful jquery plugin: https://github.com/ginader/syncHeight

Rafi Benkual almost 6 years ago

Hi Heidi. We have heard this request a few times. We will categorize it as a feature request for a future point release. Thanks!

Brandon Arnold almost 6 years ago

A non-javascript solution is to put a min-height on the boxes, that is larger than the height of either box.

Steve Trask almost 6 years ago

I have done this with JQuery by getting the height of the largest container and applying it to the CSS of the others. The only concern is if they resize the browser it may break the design.

Robin Cox almost 6 years ago

@Steve Trask. Just use this to make it work (as Tim Gunn would say):

 $(window).resize(function() {
    //put your code in here
}

Every time the viewport will rezise the columns will once again rezise

John Doe almost 6 years ago

Foundation already has a solution for this:

http://foundation.zurb.com/docs/components/equalizer.html

Michael about 5 years ago

But equalizer seems to only work if you have 1 of that type of rows. If you have more on the same page, you will need to modify or create a new script. Right?