Html 内分区的高度大于容器的高度 我有一个页脚在我的主要区域中间的问题。

默认情况下，它如下所示：

<div style={{width: '100%', height: '100%', display: 'flex', flexFlow: 'column nowrap'}}>
    <div id="appbar"></div>
    <div id="main" style={{ margin: '4.5rem 0 0 0', width: '100%', height: '100%', boxSizing: 'border-box' }}>
        <Router>
            <Home />
        </Router>
    </div>
    <div id="footer"></div>
</div>

发生的情况是，main div设置为100%，这是预期的，但随后它会显示一些深度嵌套的儿童住宅组件，其高度超过原始高度的100%。之后，我的页脚恰好卡在中间的中间：

---

如何克服这个问题？

试着用底部0给出一个绝对位置，并为内容提供填充底部

看看这里，因为我认为它解释了这一点：您的主要问题是将主元素设置为高度：100%，这使得flex无法正常工作。为了让主管道填满剩余的部分，它需要弹性：1，而不是高度。谢谢大家！但我怎么能设置得这么深，我想我的组件是100%的高度？基本上我使用react虚拟化，我希望尽可能少的努力将高度值设置为可见屏幕高度？哇@LGSon设置flex而不是高度确实有帮助。基本上，我已经结束了与flex：“1 0 80%”的主要领域，它的工作如预期。如果你回答我，我会接受它作为正确的解决方案！然后它已经回答了…所以改为链接到它。请显示一些代码示例