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

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

我对Flexbox的尝试

.包装纸{ 显示器：flex； 弯曲方向：立柱； 宽度：100%； } .标题{ 背景色：红色； 高度：100px； } .内容{ 背景颜色：蓝色； 弹性：1； } .页脚{ 背景颜色：绿色； 高度：30px； }

---

您的css已经在做您想要实现的事情

flex:1是flex-grow:1的缩写

由于其他项目具有固定高度，flex:1会使内容填满flexbox中的剩余空间。但是，问题是flexbox容器没有高度，如果要覆盖整个页面，应在容器中添加高度：100vh

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

---

页脚不需要在开始时位于底部，在内容占据一定空间后，页脚将自动位于底部

.包装纸{ 宽度：100%； } .标题{ 背景色：红色； 高度：100px； } .内容{ 背景颜色：蓝色； 高度：200px； } .页脚{ 背景颜色：绿色； 高度：30px； }

---

嗨，也许flex grow或height会有帮助？flex grow听起来像是您正在寻找的，但是。内容的大小不会受到它包含多少内容的影响，这可能会导致问题-除非保证小于100vh-60pxtall@SoftwareStudent123你的div没有关闭补丁，FirstAllow div不是一个自动关闭元素，你需要像@Nutan Panta提到的那样关闭它们。我只需要添加calc100vh-{the body padding-16px}我从来没有想过它可以这样做，我通常不做任何事情，因为在某个空间被内容部分占据后，页脚自动地到达底部。如果我们考虑身体，最好的情况是重置默认的身体边缘，并将身体的高度设定为100VH，然后给出包装器div的高度：100%。@BerkKurkcuoglu和你在一起