如何用CSS让div占据剩余的垂直空间？

用 CSS 填充剩余的垂直空间

给定的 HTML 在包装 div 中包含两个 div（#first 和 #second）（#包装纸）。目标是仅使用 #second div 和 CSS 来占据 #first 下面的剩余垂直空间。

要实现此目的，请修改 CSS 代码如下：

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

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

.first {
  height: 50px;
  background-color: #b2efd8;
}

.second {
  flex-grow: 1;
  background-color: #80c7cd;
}</code>

此修改后的代码完成通过定义以下内容来完成任务：

• 将 HTML 和 body 元素的高度设置为 100% 高度，以使整个网页垂直填满屏幕。
• 更改 #wrapper div 的display 属性设置为“flex”，并将其配置为垂直 Flex 容器。
• 为 #first div 分配固定高度，确保其垂直占据 50 像素。
• 应用 flex-grow 属性到 #second div 并值为 1。这允许 #second 自动填充 #wrapper 内剩余的垂直空间。

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