Full height columns on Foundation

css, html, row-height, zurb-foundation

Solution

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.

Problem

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> ```

Original source