Menu icon Foundation
Rows fill parent column equally

I am new to Foundation and I ran into a problem I can't find the answer to. My site contains a row with two columns (5 and 7 wide). The image in the 5-wide column determines the height of the row. Inside the 7-wide column I would like to have 3 rows that equally divide the available height of the parent (in this case the 7-wide column). Right now I am doing this by setting the height in pixels but this seems not the way to go in a responsive layout. How can I achieve 3 equally high rows inside the 7-wide column?

P.S. I'm using Foundation 5.

<div class="row" data-equalizer>
    <div class="large-5 columns albumart" data-equalizer-watch>
      <img src="albumart.jpg">
    </div>
    <div class="large-7 columns" data-equalizer-watch>
      <div class="row">
        <div class="large-12 columns track1" style="height: 129px;"><h2>Track 1</h2></div>
      </div>
      <div class="row">
        <div class="large-12 columns track2" style="height: 129px;"><h2>Track 2</h2></div>
      </div>
      <div class="row">
        <div class="large-12 columns track3" style="height: 128px;"><h2>Track 3</h2></div>
      </div>
    </div>
  </div>
            

         

Rowsfillequalparent

I am new to Foundation and I ran into a problem I can't find the answer to. My site contains a row with two columns (5 and 7 wide). The image in the 5-wide column determines the height of the row. Inside the 7-wide column I would like to have 3 rows that equally divide the available height of the parent (in this case the 7-wide column). Right now I am doing this by setting the height in pixels but this seems not the way to go in a responsive layout. How can I achieve 3 equally high rows inside the 7-wide column?

P.S. I'm using Foundation 5.

<div class="row" data-equalizer>
    <div class="large-5 columns albumart" data-equalizer-watch>
      <img src="albumart.jpg">
    </div>
    <div class="large-7 columns" data-equalizer-watch>
      <div class="row">
        <div class="large-12 columns track1" style="height: 129px;"><h2>Track 1</h2></div>
      </div>
      <div class="row">
        <div class="large-12 columns track2" style="height: 129px;"><h2>Track 2</h2></div>
      </div>
      <div class="row">
        <div class="large-12 columns track3" style="height: 128px;"><h2>Track 3</h2></div>
      </div>
    </div>
  </div>
            

         
Rafi Benkual over 5 years ago

The column height is determined by content. You can use css like you did to control that. It works fine. http://cdpn.io/Ldzrk

Flexbox solves this problem http://css-tricks.com/snippets/css/a-guide-to-flexbox/

The browser support isn't all there yet but it looks good for Foundation 6.