子divを100％の高さに設定するには（Foundation 6）？

Question

33％のdivが3つあります。 1番目は空のdiv、2番目のdivは4つの画像、3番目の空のdivです。

どのようにしてこれら3つのブロックの高さを同じに保ちますか？私は財団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

使用財団イコライザJSを使用しています。ここにあなたのコードが使用している基礎イコライザー：

コード：

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