时间戳

首页 > 解决方案 > 如何使用 Flexbox 使 div 填充剩余的垂直空间？

css - 如何使用 Flexbox 使 div 填充剩余的垂直空间？

问题描述

我想在页面中垂直堆叠 3 个元素（页眉、页脚和一些内容）。页眉和页脚 div 具有固定的高度。如何使内容 div（中间的那个）占据剩余的垂直空间？

我对 Flexbox 的尝试

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

.header {
  background-color: red;
  height: 100px;
}

.content {
  background-color: blue;
  flex: 1;
}

.footer {
  background-color: green;
  height: 30px;
}
<div class="wrapper">
  <div class="header" />
    <div class="content" />
    <div class="footer" />
</div>

标签： cssflexbox

解决方案

您的 css 已经在做您想要实现的目标。

flex: 1是简写flex-grow: 1

由于其他项目的高度是固定的，因此flex: 1会导致您的内容填充 flexbox 中的剩余空间。然而问题是你的 flexbox 容器没有高度，如果你想覆盖整个页面，你应该添加height: 100vh到容器中。

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

推荐阅读