在 CSS 中设置高度以从页面中间到达视口底部答案

【问题标题】：set height in CSS to get to the bottom of the viewport from the middle of the page在 CSS 中设置高度以从页面中间到达视口底部
【发布时间】：2015-06-25 22:20:40
【问题描述】：

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

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

我需要滚动视图伸展到视口的底部，因此如果 number of rows * height of the row 从滚动视图溢出，它将滚动。

这样我可以保持滚动视图上方的所有块“固定”。我不能对这些元素使用固定位置，因为它们在另一个容器内，并且该容器使用 flexbox，所以我没有宽度和高度。

我的尝试是"height: 100%" and "height: 100vh"，但我需要"calc(100% - height(.search-bar) - height(.dates-bar) - height(.toolbar)"之类的东西

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

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

【问题讨论】：

设置一个 jsfiddle 以便我们可以准确地看到您的意思
添加了一个问题。

标签： html css flexbox

【解决方案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>

【讨论】：

jsfiddle.net/k6uLfamq/1 我把最后一行“你好”，我永远无法通过滚动到达它，因为高度超出了视口。查看绿色边框。它们超出了视口。我需要使绿色边框的底部位于 viewport 的底部，而不是容器的底部（body 或 div.container）。

【解决方案2】：

我使用 flexbox 解决了这个问题。这是CSS

 .container {
     display: flex;
     flex-direction: column;
 }

 .scroll-view {
     flex-grow: 1;
 }

【讨论】：