4

我正在使用 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>
4

4 回答 4

10

对于其他正在寻找这个的人，它现在作为均衡器内置在 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>

呈现的 HTML 的屏幕截图

于 2014-07-18T14:11:55.347 回答
3

解决方案

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

我把它扔进了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%;panelcolumnrowbodyHTML

于 2014-02-21T18:46:09.827 回答
0

在基础（使用 EM 到 PX 转换）中，他们的主要变化是：640px（堆叠所有大/中-6）。所以使用像这样的 div，用火的 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
}
于 2014-11-17T18:06:56.337 回答
0 
<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>

添加内部 div高度 =“100%”

于 2018-06-19T10:26:24.090 回答