将网格中的右列缩放为左列的 100%

Question

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

我做了一个 JSBin 来说明我的问题（出于某些原因，您必须在单独的选项卡中打开输出）。

看起来是这样的：

div {
  border: 1px solid #CCC;
}

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

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 文件。

将网格中的右列缩放为左列的 100%

Scale right column in grid to 100% of left column

html

css

zurb-foundation