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

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/