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

以下是使用height:calc(); https://jsfiddle.net/DTcHh/16058/

的解决方案

由于你的身体填充物很难设置，但它有效。

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

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

Answer 2

您可以尝试使用flexbox。它应该能够在较小的视口高度上正确触发滚动条。

body {
  margin: 0;
}
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.top-row {
  flex: 0 0 300px;
  background-color: black;
  color: white;
  margin-bottom: 15px;
}
.bottom-row {
  flex: 1;
  background-color: red;
  color: white;
}

https://jsfiddle.net/3kom9Lo6/

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

2 个答案: