html - 在 CSS 中设置高度以从页面中间到达视口(viewport)底部

Question

这可能吗？我有以下布局:

<div class="toolbar">
</div>

<div class="dates-bar">
</div>

<div class="search-bar">
</div>

<div class="scroll-view">
    <table class="table-view">
        <tr><td>...</td></tr>
    </table>
</div>

我需要 ScrollView 延伸到视口(viewport)的底部，所以如果 number of rows * height of the row 从 ScrollView 溢出，它将滚动。

这样我就可以将 ScrollView 上方的所有 block 保持“固定”。我不能为这些元素使用固定位置，因为它们位于另一个容器内，并且该容器使用 flexbox，所以我没有宽度和高度。

我的尝试是 "height: 100%"和 "height: 100vh" 但我需要像 "calc(100% - height(.search-bar) - height( .dates-bar) - height(.toolbar)"

我能做什么？我不想为此使用 JavaScript。如果可以使用 flexbox，我会使用它。

编辑:这是问题的关键:http://jsfiddle.net/c38p8e70/

Answer 1

我认为这就是您想要做的。

body {margin:0;}
div {
  height: 50px;
  background: blue;
}

.scroll-view {
  position: absolute;
  height: 100%;
  width: 100%;
  background: yellow;
  overflow: auto;
}

<div class="toolbar">

</div>

<div class="dates-bar">

</div>

<div class="search-bar">

</div>

<div class="scroll-view-wrapper">
  <div class="scroll-view">
    <table class="table-view">
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
      </tr>
    </table>
  </div>
</div>