I'm using Foundation 5 Framework and need to create 3 same height columns.
Second columns includes 2 panels, I need to stretch all columns to full height (in the second columns there will be just second panel stretched to full height).
Any idea? I don't want to use block grid for this.
My code:
<div class="row">
<div class="small-12 medium-4 columns">
<div class="panel">
<!-- here comes the content--->
</div>
</div>
<div class="small-12 medium-4 columns">
<div class="panel">
<!-- here comes the content--->
</div>
<div class="panel">
<!-- here comes the content--->
</div>
</div>
<div class="small-12 medium-4 columns">
<div class="panel">
<!-- here comes the content--->
</div>
</div>
</div>
For anyone else looking for this, this is now built in to Foundation as Equalizer http://foundation.zurb.com/docs/components/equalizer.html
From their docs:
You can create an equal height container using a few data attributes. Apply the
data-equalizer
attribute to a parent container. Then apply thedata-equalizer-watch
attribute to each element you'd like to have an equal height. The height ofdata-equalizer-watch
attribute will be equal to that of the tallest element.
<div class="row" data-equalizer>
<div class="large-6 columns panel" data-equalizer-watch>
...
</div>
<div class="large-6 columns panel" data-equalizer-watch>
...
</div>
</div>