如何使用垂直滚动将表高度设置为容器的高度？

Question

http://jsfiddle.net/awu1tzoj/

我缺少一个技巧吗？我希望桌子也限制在.panel-body的高度。

html, body {
    height: 100%;
}
.panel-body {
    height: 100px;
}
table {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

Answer 1

您需要将overflow: auto添加到.panel-body类，如下所示：

html,
body {
  height: 100%;
}
.panel-body {
  height: 100px;
  overflow: auto;
}
table {
  width: 100%;
}

<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
      </tbody>
    </table>


  </div>
</div>

JSFiddle：http://jsfiddle.net/awu1tzoj/2/