CSS - 没有 "calc"的 div 高度计算

Question

在我的网站中，我使用了两个 div，它们的 height 应该像 in this picture .

所以，有一个 div 与 height:90px; 对齐到窗口的底部，如果我想要第二个 div (红色)来“填充”窗口的其余部分？红色 div 应该有窗口的 height 减去蓝色 div 的 height 但是像 calc(100vh - 90px) 行不通，对吧？

谢谢!

Answer 1

实际上 height: calc(100vh - 90px); 有效

html,
body {
  min-height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
footer {
  height: 90px;
  background: blue;
}
main {
  background: red;
  height: calc(100vh - 90px);
}

<main></main>
<footer></footer>

但是，如果内容通常会导致垂直滚动，您还不完全清楚您希望它如何 react 。 那么这可能不是答案。

使用 flex-box 的替代解决方案

html,
body {
  min-height: 100%;
}
* {
  margin: 0;
  padding: 0;
}

.wrap {
  display: flex;
  flex-direction: column;
  flex-wrap:no-wrap;
  min-height:100vh;
}
main {
  background: red;
  flex:1;
}

footer {
  flex-basis:90px;
  flex-shrink:0;
  background: rgba(0, 0, 255, 1);
}

<div class="wrap">
  <main>
    <div class="content"></div>
  </main>
  <footer>
  </footer>
</div>