Question

我本质上希望第一个块自然占据任何高度。然后，我要第二个块以其自然高度填充页面的其余部分，而不用让它创建垂直滚动条。

我基本上是通过模板行对 100px 进行硬编码。如何使事情变得更灵活？我尝试了各种值，例如100%，而不是行中的100px，以及auto。

.container {
  display: grid;
  grid-template-rows: 100px 1fr;
}

.rest {
  max-height: calc(100vh - 100px);
}

<div class="container">
  <div>
    <h1>Welcome</h1>
    <h2>Some text that can change length/height</h2>
  </div>
  <div>
    <div class="rest">I want this block to be the remaining 100% height</div>
  </div>
</div>

Answer 1

fr在这里不起作用，因为container的高度是 auto ，因为您没有为其设置 fixed 高度。因此，您可以将container的高度设置为 100vh （请注意，我已将margin的{{1}}的高度设置为零，以便 override 默认浏览器边距）。

也可以使用body来让第一行采用 auto 高度，第二行采用剩余高度。参见下面的演示：

grid-template-rows: auto 1fr

body {
  margin: 0;
}

.container {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
}

.container>div {
  border: 1px solid;
}

Answer 2

我能够使用flex-box完成此操作。

查看此代码段：

<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.parent {
  background-color: steelblue;
  width: 500px;
  height: 500px;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.child-1 {
  background-color: orangered;
  width: 100%;
}

.child-2 {
  background-color: yellowgreen;
  width: 100%;
  height: 100%;
}

如何使用calc正确设置动态高度？

2 个答案: