html - Bootstrap 3 : height 100% doesn't work in the nested row

Question

expected
我正在尝试使用以下代码在嵌套行中设置 100% 高度:

<div class="row">
        <div class="col-md-4">
            <!--This is not working-->
            <div style="height:100%">
                First Column, First Cell
            </div>
        </div>
        <div class="col-md-8">
            <div class="row">
            <div class="col-xs-12">
                Second Column, First Cell
            </div>
            <div class="col-xs-12">
                Second Column, Second Cell
            </div>
            <div class="col-xs-12">
                Second Column, Third Cell
            </div>
        </div>
    </div>
</div>

但它输出为 output

Answer 1

您可以使用 Bootstrap Tables而不是行和列。

更新。我为单元格添加了彩色轮廓。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<style>
  td {
    border: 0 !important;
    outline: 4px solid;
    outline-offset: -8px;
    padding: 16px !important;
  }
  .red-box {
    outline-color: red;
  }
</style>

<div class="container">
  <table class="table">
    <tr>
      <td rowspan="3" class="red-box">First Column, First Cell</td>
      <td>Second Column, First Cell</td>
    </tr>
    <tr>
      <td>Second Column, Second Cell</td>
    </tr>
    <tr>
      <td>Second Column, Third Cell</td>
    </tr>
  </table>
</div>