html - Div 填充可用空间的 100% 高度

Question

我正在处理有 2 个主要行的网页，顶行的高度固定为 300 像素并且不会改变。

底行需要填满视口(viewport)/屏幕的高度(其余部分如果空间足够的话。)

请将此线框视为基本示例:https://wireframe.cc/aUePUH

我尝试将 body/html 设置为 100%，然后将底行容器设置为 100%，使底行中的 3 个列也为 100% 高度，但它们似乎只达到内容的 100% 高度。

理想情况下，我想在底行设置一个最小高度，然后在有更多垂直空间可用时让它展开并填充视口(viewport)

我以前也有 height: 100vh 但那似乎没有做到。

<div class="container">
  <div class="row top-row">
    <p>Top Row with a fixed heigh - 300px</p>
  </div>

  <div class="row bottom-row">
    <div class="col-xs-4">
      <p>Col 1</p>
      <p>
        Should fill viewport/avaialable screen height
      </p>
    </div>

    <div class="col-xs-4">
      <p>Col 2</p>
      <p>
        Should fill viewport/avaialable screen height
      </p>
    </div>

    <div class="col-xs-4">
      <p>Col 3</p>
      <p>
        Should fill viewport/avaialable screen height
      </p>
    </div>
  </div>
</div>

top-row {
  height: 300px;
  background-color: black;
  color: white;
  margin-bottom: 15px;
}

.bottom-row {
  height: 100%;
}

.col-xs-4 {
  background-color: red;
  color: white;
}

这是一个 JS FIDDLE 示例:https://jsfiddle.net/DTcHh/16054/

Answer 1

这是一个使用 height:calc(); 的解决方案 https://jsfiddle.net/DTcHh/16058/

由于您的 body 填充，它有点难以设置，但它有效。

.bottom-row {
  height:calc(100vh - 335px);
}

.col-xs-4 {
  height:100%;
  background-color: red;
  color: white;
}