内部div的高度大于容器的高度

Question

我的主要区域中间有一个页脚问题。

默认情况下，它看起来像这样：

<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>

会发生什么事，将主div设置为100％，这是可以预期的，但随后会出现一些深度嵌套的子项（Home组件），其高度超过原始高度的100％。之后，我的页脚恰好停留在main的中间：

我该如何克服这个问题？

Answer 1

尝试将绝对位置设置为底部0，并为内容设置底部填充