Html React/Flexbox/SPA/No滚动条：无法将页面分割为占据整个页面的页眉/内容/页脚

我希望你身体好

我正在React中构建一个页面，它占据了100%的视图高度，并且已禁用溢出。当我有一个动画页脚时，我的麻烦就来了，用户可以使用它来压缩内容，以便为自己腾出空间。我在下图中描述了这一点。请原谅拼写错误。。。。我不称职

现在，我已经将页眉和页脚设置为绝对，并分别固定在页面的顶部和底部，我正在尝试使用Flex grow使内容适应，但到目前为止，它似乎没有响应

谢谢你的时间

PS

我很确定这个笨蛋回答了我的问题，但我还没有让flex的任何更改生效（生效？）

---

您的页脚和页眉设置为绝对值，因此它们被排除在flexbox布局之外。移除

position:absolute

，将主容器（无论是什么包装了所有3个容器）设置为

display:flex；flex direction:column

，为页眉和页脚设置所需的

高度

，然后将

flex grow:1

添加到内容容器中，以占用整个剩余空间

您是圣人。忘记了这不是实现页脚扩展的最佳方法：实际上，您不希望内容根据页脚高度调整高度。您希望页眉和页脚是绝对的，内容占据整个屏幕。当然，内容的某些部分会隐藏在这两者后面，这就是为什么要在内容中添加一些填充来进行补偿。这种方法的优点是，更改页脚高度不会导致内容的布局重新计算，并且工作起来更加平滑