Html CSS：使用flexbox创建固定页眉和页脚，同时具有动态上下文

我试图设置一个固定页眉和固定页脚，其中内部内容容器可以是任意大小，并且不影响页眉/页脚大小。我有点卡住了，不知道我是否在这里为

.container div

样式错误地使用了

flex basis

.container{
显示器：flex；
弯曲方向：立柱；
}
.货柜组{
弹性基准：50px；
}
.标题{
背景：红色；
}
.内容{
背景：粉红色；
}
.页脚{
背景：绿色；
}

---

您应该为

容器设置
最小高度
，并使用
调整内容：间距
另外，在
.content
上使用
flex:1
，这样它就占用了这两者之间的可用空间：）

以下是完整代码：


.container{
显示器：flex；
弯曲方向：立柱；
最小高度：100vh；
证明内容：之间的空间；
}
.货柜组{
弹性基准：50px；
}
.标题{
背景：红色；
}
.内容{
背景：粉红色；
弹性：1；
}
.页脚{
背景：绿色；
}
我刚刚在内容部分使用了
flex-grow:1
，以占用所有内部空间。这是一个可行的选择吗


正文{
背景：灰色；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
}
.标题{
背景：红色；
弹性基准：50px；
}
.内容{
背景：粉红色；
柔性生长：1；
}
.页脚{
背景：绿色；
弹性基准：50px；
}
看，这是将页眉和页脚固定到flex的常用解决方案

其中，对于
.header
和
.footer
您提供了一个固定的高度-
弹性基准：50px
，但您在
.content
中提供了
弹性：10 auto
，以在可用空间中容纳此容器

另外，将其添加到css中，以排除
正文
标记的不必要缩进，以及规则
框大小：边框框
：

body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

但仍然不是重点。设置
.container
container-
最小高度：100vh


正文{
框大小：边框框；
保证金：0；
填充：0；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
最小高度：100vh；
}
.标题{
背景：红色；
弹性基准：50px；
}
.内容{
背景：粉红色；
弹性：10自动；
}
.页脚{
背景：绿色；
弹性基准：50px；
}
我有点困惑，但可能这就是你想要的：


*{
保证金：0；
填充：0；
框大小：边框框；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
}
.货柜组{
flex basis:100vh；/*不需要在所有div中使用它，只需在内容中使用它*/
}
.页眉，.页脚{
位置：固定；
宽度：100%；/*任何您想要的*/
高度：8vh；/*随你的便*/
}
.标题{
排名：0；
背景：红色；
}
.内容{
背景：粉红色；
高度：100vh；
}
.页脚{
底部：0；
位置：固定；
背景：绿色；
}

亲爱的@Ricardo：我试着回答你的问题。请看一看。希望这就是你想要的：）甚至，如果你没有设置高度，那么在
上使用f
lex:1
。content
将确保你的内容与文本一起增长：）谢谢Imran！我没有想到要使用
justify content:space-between
将它们垂直分开，谢谢！我刚刚发布了另一个答案，在玩了它之后…我的解决方案可以作为一个选项吗？嗨，朋友：）我提到过使用
flex:1在我的回答中也是如此。这实际上是…的缩写形式<代码>柔性增长：1
弹性收缩：1
柔性底座：自动所以我把它也包括在我的朋友身上了。。。请检查我最后更新的答案：）酷，谢谢！！！嗨，伙计！我可以知道你的答案和我的有什么不同吗<代码>弹性收缩：0
右：）？