将网格中的右列缩放到左列的100％

Question

我使用基础网格。我有一个有两列的网格，并希望将右列的内容缩放到左列高度的100％。

我制作了一个JSBin来说明我的问题（由于某些原因，你必须在一个单独的标签中打开输出）。

它的外观如下：

＆＃13;

＆＃13;

div {
  border: 1px solid #CCC;
}

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/normalize.min.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/foundation.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/vendor/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/foundation.min.js"></script>
<div class="row" style="width:50%">
  <div class="small-8 columns">
    <div class="row">
    left column first row
    </div>
        <div class="row">
    left column second row
    </div>
        <div class="row">
    left column third row
    </div>
            <div class="row">
    left column fourth row
    </div>
            <div class="row">
    left column fifth row
    </div>
            <div class="row">
    left column sixth row
    </div>
            <div class="row">
    left column seventh row
    </div>
            <div class="row">
    left column eigth row
    </div>
            <div class="row">
    left column ninth row
    </div>
  </div>
    <div class="small-4 columns">
      <div class="row">
    this is supposed to scale to 100% of the size of the left column
      </div>
  </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

请尝试以下操作： Demo

CSS：

div {
  border: 1px solid #CCC;       
}
#row_box{
  display:table;
}
.child{
  display:table-cell;
  background-color:red;
}    
.child:nth-child(2)
{
    background-color:yellow;
}

HTML：

<div class="row" style="width:50%">
  <div id="row_box"> // added id row_box

  <div class="large-8  child"> // added class child & removed columns
    <div class="row">
    left column first row
    </div>
        <div class="row">
    left column second row
    </div>
        <div class="row">
    left column third row
    </div>
            <div class="row">
    left column fourth row
    </div>
     </div>

    <div class="large-4 child">  // added class child & removed columns
      <div class="row">
    this is supposed to scale to 100% of the size of the left column
      </div>

  </div>
  </div>
  </div>

注意： 这个-ve边距来自你的css文件。