基础上的全高柱

Question

我正在使用Foundation 5 Framework,需要创建3个相同高度的列.

第二列包括2个面板,我需要将所有列拉伸到全高(在第二列中,只有第二个面板拉伸到全高).

任何的想法？我不想为此使用块网格.

我的代码:

<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

对于其他任何寻找此问题的人来说,现在它已作为均衡器内置于Foundation 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 2

解决方案

我能够实现的唯一解决方案是使用 jQuery 来同步高度，该解决方案来自GitHub 上的 joanhard ，在stackoverflow 上的 Foundation 4 线程中引用。

我把它扔进了codepen，http://codepen.io/anon/pen/zgnBE。这是完整的来源。

超文本标记语言

<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。唯一的工作结果是由于填充或边距而产生滚动溢出。我尝试消除它们，但这会花费更长的时间来调试。