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

Question

我正在处理有2个主要行的网页,顶行有一个300px的固定高度,不会改变.

底行需要填充视口/屏幕的高度(其余部分如果是可用空间.)

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

我已经尝试将body/html设置为100%然后将底行容器设置为100%使得底部行中的3个cols也是100%高度,但它们似乎只是达到内容的100%高度.

理想情况下,我想在底行设置最小高度,然后如果有更多垂直空间可以扩展并填充视口

我也很久以前身高: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

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

由于你的身体填充,它很难设置,但它的工作原理.

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

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