如何使用 CSS Flexbox 填充容器中剩余的垂直空间？

Susan Sarandon

发布： 2024-10-28 08:42:02

原创

445 人浏览过

How to Fill Remaining Vertical Space in a Container with CSS Flexbox?

用#second填充剩余的垂直空间

为了用#second div填充#first下#wrapper的剩余垂直空间，使用仅使用 CSS，您可以采用以下步骤：

将 html 和 body 设置为占据 100% 高度，没有边距。
将 display: flex、flex-direction: column 分配给父容器.wrapper。
给.first指定具体高度。
将flex-grow: 1设置为.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>

登录后复制

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

登录后复制

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

来源：php.cn

上一篇：如何仅使用 CSS 在视频和图像元素上实现“background-size: cover”行为？下一篇：Roseview 简介：轻量级 UI 框架，满足您所需的一切，没有您不需要的

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章