如何设置子div 100%父母的高度(基础6)?

时间:2016-11-10 14:42:20

标签: html css html5 css3 zurb-foundation

另外还有三个33%的div。第一个是空div,第二个是包含四个图像的div,第三个是空div。

我如何响应地保持这3个区块的高度相同?我正在使用Foundation 6。

enter image description here

.block {
  background: grey;
}

.block, .imgBlock {
    height: 200px;
}

.imgBlock .row .column{
  padding: 0;
}
<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.js"></script>

<div class="row small-up-3">
  <div class="column block">
  </div>
  <div class="column imgBlock">
    <div class="row small-up-2">
      <div class="column">
        <img src="http://placekitten.com/200/150"/>
      </div>
      <div class="column">
        <img src="http://placekitten.com/200/150"/>
      </div>
      <div class="column">
        <img src="http://placekitten.com/200/150"/>
      </div>
      <div class="column">
        <img src="http://placekitten.com/200/150"/>
      </div>
    </div>
  </div>
  <div class="column block">
  </div>
  
</div>

1 个答案:

答案 0 :(得分:1)

使用基础均衡器js。以下是使用基础均衡器的代码:

<强>代码:

&#13;
&#13;
$(document).foundation();
&#13;
.block {
  background: grey;
}
.block,
.imgBlock {
  height: 200px;
}
.imgBlock .row .column {
  padding: 0;
}
&#13;
<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/plugins/foundation.equalizer.js"></script>
<div class="row small-up-3" data-equalizer>
  <div class="column block" data-equalizer-watch>
  </div>
  <div class="column imgBlock" data-equalizer-watch>
    <div class="row small-up-2">
      <div class="column">
        <img src="http://placekitten.com/200/150" />
      </div>
      <div class="column">
        <img src="http://placekitten.com/200/150" />
      </div>
      <div class="column">
        <img src="http://placekitten.com/200/150" />
      </div>
      <div class="column">
        <img src="http://placekitten.com/200/150" />
      </div>
    </div>
  </div>
  <div class="column block" data-equalizer-watch>
  </div>

</div>
&#13;
&#13;
&#13;