以下是一些适合您文章内容和风格的标题选项： 选项 1（直接且清晰）： * 如何使用 Flexbox 分配剩余垂直空间 选项 2（问题格式）： * 想要

使用 Flexbox 和剩余垂直空间实现理想的高度分布

Flexbox 提供了一种优雅且高效的 CSS 解决方案，用于填充剩余垂直空间容器元素。在这种情况下，我们的目标是在 #wrapper 容器内分配 #first 和 #second div 之间的高度，确保 #second 占据剩余空间。

采用的解决方案利用以下 CSS 代码：

<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>

在 #wrapper div 中，我们建立了一个垂直方向的 Flexbox 布局。这允许两个 div，#first 和 #second，垂直对齐。 #wrapper 的高度设置为 100%，确保它占据视口的整个高度。

为了指定 #first 的高度，我们分配固定值 50px。对于#second，我们利用 flex-grow 属性来控制其高度。通过将 flex-grow 设置为 1，我们指示 #second 应该扩展以填充 #wrapper 容器内的任何剩余空间。

因此，#first 占据 50px 的固定高度，而 #second 则动态调整它的高度填充剩余的垂直空间。这可确保布局适应不同的屏幕尺寸和设备方向。

以上是以下是一些适合您文章内容和风格的标题选项： 选项 1（直接且清晰）： * 如何使用 Flexbox 分配剩余垂直空间 选项 2（问题格式）： * 想要的详细内容。更多信息请关注PHP中文网其他相关文章！