如何使用 CSS 用第二个 Div 填充包装 Div 中的剩余垂直空间？-css教程-PHP中文网

如何使用 CSS 用第二个 Div 填充包装 Div 中的剩余垂直空间？

Linda Hamilton

发布： 2024-10-26 16:05:30

原创

188 人浏览过

How to Fill Remaining Vertical Space in a Wrapper Div with a Second Div Using CSS?

使用 CSS 填充垂直空间

问题：

您有一个包含 #first 的 #wrapper div 的布局和#第二个div。您需要仅使用CSS来填充#first下方#wrapper的剩余垂直空间。

解决方案：

Flexbox布局：
- 设置包装器div显示：flex和flex-direction：column。这将设置垂直布局。
- 将包装器的高度设置为 100%。
高度控制：
- 将第一个 div 的高度设置为固定值（例如 50px），以确保其不会扩展。
Flex- Grow 属性：
- 在第二个 div 上使用 flex-grow 属性。此属性允许第二个 div 垂直扩展并填充剩余空间。将 flex-grow 设置为 1 以使其灵活。

代码示例：

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

登录后复制

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