如何仅使用 CSS 用 Div 填充剩余的垂直空间？

仅使用 CSS 用 #second 响应式填充垂直空间

问题：

如何我们只使用CSS填充#wrapper中#first下的剩余垂直空间？

解决方案：

要实现这一点，我们可以利用CSS中的flexbox属性：

<code class="css">html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100%;
}

.first {
  height: 50px;
}

.second {
  flex-grow: 1;
}</code>

HTML:

<code class="html"><div class="wrapper">
  <div class="first" style="background:#b2efd8">First</div>
  <div class="second" style="background:#80c7cd">Second</div>
</div></code>

说明：

1. 将 html 的高度设置为 100%， body 占据视口的整个高度。
2. 创建一个父容器 .wrapper，并显示：flex。
3. 设置 flex-direction: column 以垂直排列子元素。
4. 为 .first 分配固定高度以确定其大小。
5. 在 .second 上使用 flex-grow: 1 使其能够扩展并填充剩余的垂直空间。

以上是如何仅使用 CSS 用 Div 填充剩余的垂直空间？的详细内容。更多信息请关注PHP中文网其他相关文章！