css - 如何使元素填充剩余的视口(viewport)高度？

Question

我想使用 CSS 网格。我认为是这样的……

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto [whatever's left of the vh] auto auto;
  position: relative;
}

Answer 1

用 display: flex 和 height: 100vh 设置视口(viewport)并添加到最后一个元素 flex 增长:1

.viewportDiv {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.div1{
  background-color: yellow;
  height: 100px;
}
.remainingDiv{
  background-color: red;
  flex-grow: 1;
}

<div class="viewportDiv">
  <div class="div1"></div>
  <div class="remainingDiv"></div>
</div>