How to set child div 100% height of the parent (Foundation 6)? - html

Question

There are three 33% divs next to eachother. The 1st is an empty div, the 2nd a div containing four images, and the 3rd empty div.
How do I responsively keep these 3 blocks the same height? I'm using Foundation 6.
.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>

Answer 1

Use foundation equalizer js. Here is your code using foundation equalizer:
Code:
$(document).foundation();
.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>
<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>