Вертикально выравнивать ряды до 100% высоты

Question

Я создаю новостной модуль для веб-сайта, и я хочу показать последнюю статью с большой фотографией и тремя статьями рядом с ней. Я использую Фонд 5.

Вы можете увидеть мой текущий прогресс здесь:

<div class="large-5 columns" data-equalizer-watch> 
    <div class="smallnews"> 
     <div class="row"> 
      <div class="small-4 columns"><img src="i/andromeda-orbit.jpg" alt /></div> 
      <div class="small-8 columns">Lorem ipsum dolor sit amet.</div> 
     </div> 
     <div class="row"> 
      <div class="small-4 columns"><img src="i/andromeda-orbit.jpg" alt /></div> 
      <div class="small-8 columns">Lorem ipsum dolor sit amet.</div> 
     </div> 
     <div class="row"> 
      <div class="small-4 columns"><img src="i/andromeda-orbit.jpg" alt /></div> 
      <div class="small-8 columns">Lorem ipsum dolor sit amet.</div> 
     </div> 
    </div> 
</div> 

Мой ДИВ точно такой же высоты, как увеличить. Я использую эквалайзер Foundation для этого. Поэтому в основном я хочу, чтобы плагин jQuery или трюк css, чтобы эти три строки соответствовали 100% родительской высоты. Я не знаю, сколько текста будет в них.

Answer 1

Вы можете использовать display:table для .smalnews и display:table-row ширина ее строки так:

.smallnews{ 
    display:table; 
    height:100%; 
} 
.smallnews .row{ 
    display:table-row; 
} 

Демо: https://jsfiddle.net/IA7medd/drv7svym/

Answer 2

Ваши три отделения должны иметь float:left;, height от 33.3% и без разницы.