基础上的全高柱 [英] Full height columns on Foundation

问题描述

我使用Foundation 5 Framework，需要创建3个相同的高度列。

I'm using Foundation 5 Framework and need to create 3 same height columns.

第二列包括2个面板，我需要将所有列拉伸到全高在第二列中将只有第二个面板拉伸到完全高度）。

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.

我的代码：

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

推荐答案

解决方案

我能够实现的唯一解决方案使用jQuery来同步高度是从 joanhard on GitHub ，请参阅 stackoverflow上的Foundation 4线程。

我把它放在了代码中， http://codepen.io/anon/pen/zgnBE 。这里是完整的源。

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

<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

CSS

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

}

.full-height
{
  display:table;
}

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

JavaScript

JavaScript

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

没有jQuery

从面板的所有元素 height：auto; 和 height：100％; $ c>，列， row ， HTML 元素。唯一的工作结果产生滚动溢出由于填充或边距。我试图消除它们，但这将需要更长的时间来调试。

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.

这篇关于基础上的全高柱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！