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

【问题标题】：React/Flexbox/SPA/No scrollbars: Trouble segmenting page into header/content/footer that takes up the whole pageReact/Flexbox/SPA/无滚动条：无法将页面分割成占据整个页面的页眉/内容/页脚
【发布时间】：2019-10-29 17:27:23
【问题描述】：

希望你一切安好。

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

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

感谢您的宝贵时间！

我很确定这个傻瓜回答了我的问题，但我还没有任何 flex 更改生效（效果？）。

Make a div fill the height of the remaining screen space

【问题讨论】：

标签： html css reactjs flexbox

【解决方案1】：

您的页脚和页眉设置为绝对，因此它们被排除在 flexbox 布局之外。删除position: absolute，将您的主容器（包含所有这三个容器）设置为display: flex; flex-direction: column，为您的页眉和页脚设置所需的height，然后将flex-grow: 1添加到您的内容容器中，以便它占用整个剩余空间

【讨论】：

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