Full height columns on Foundation

Question

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>

Knowable

Answer 1

Solution

The only solution I was able to implement uses jQuery to sync the height is from joanhard on GitHub, referenced in a Foundation 4 thread on stackoverflow.

I've thrown it into codepen, http://codepen.io/anon/pen/zgnBE. Here's the source in full.

HTML

<div class="main">
<div class="full-height row " >
  <div class="full-height small-12 medium-4 columns " >
    <div class="full-height-panel panel "  >
      <!-- here comes the content--->
      hello
    </div>
  </div>
  <div class="full-height small-12 medium-4 columns ">
    <div class="panel">
      <!-- here comes the content--->
      hi
    </div>
    <div class="panel">
      <!-- here comes the content--->
   hi2
    </div>
  </div>
  <div class="small-12 medium-4 columns">
    <div class="panel">
      <!-- here comes the content--->
      holla
    </div>
  </div>
</div>
</div>

CSS

html, body
{
  height: 100% !important;
  padding: 0px;
  margin:0;

}

.full-height
{
  display:table;
}

.full-height-panel
{
  display:table-cell;
}

JavaScript

$(document).foundation();
$(".full-height").height($(".main").parent().height()); 

Without jQuery

I tried height:auto; and height:100%; on all elements from the panel, column, row, body to the HTML element. The only working result produced scroll overflow due to padding or margins. I tried eliminating them but this would take longer to debug.

Lumberjack

thank you it works! anyway, keeping foundation work also on IE8 is like nightmare. – Knowable

Answer 2

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 the data-equalizer-watch attribute to each element you'd like to have an equal height. The height of data-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>

Rudderpost

Answer 3

In foundation (using an EM to PX conversion) their major change fire at: 640px(stack all large/medium-6). So using divs like this, the CSS with fire and make them

 <div class="row equalized-to">
   <div class="large-6 medium-6 columns">
     <div class="panel full-height">

Put this at the end:

if($(window).width()>640){ //if not stacked(no need for height)
  $(".full-height").height($(".equalized-to").height()); //find row height and apply it to all columbs by adding styles
}

Ionia

Answer 4

<div class="about-us">
  <div class="row">
   <div class="columns medium-4">
    <div class="like">CONTENT 1</div>
    </div>
    <div class="columns medium-4">
    <div class="like">CONTENT 2</div>
    </div>
    <div class="columns medium-4">
     <div class="like">CONTENT 3</div>
    </div>
  </div>
</div>

css

<style>
.row{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  }
 .like{
     height:100%;
   }
</style>

add inner div height="100%"

Herwig