Full columns based

Question

I am using Foundation 5 Framework and you need to create 3 identical height columns.

The second columns include 2 panels, I need to stretch all the columns to full height (in the second columns there will only be a second panel extended to full height).

Any idea? I do not want to use a block grid for this.

My code is:

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

Answer 1

Decision

The only solution that I was able to realize, using jQuery to synchronize with the height joanhard on GitHub , a reference to the fooobar.com/questions/949448 / ... .

codepen, http://codepen.io/anon/pen/zgnBE. .

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()); 

jQuery

height:auto; height:100%; panel, column, row, body HTML. - . , .

Answer 2

, , Foundation Equalizer http://foundation.zurb.com/docs/components/equalizer.html

:

, . data-equalizer . data-equalizer-watch , . data-equalizer-watch .

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

Answer 3

( EM PX) : 640px ( / 6). , divs, CSS

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

:

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
}