反应中与其他元素重叠的元素

Question

在我的 React 项目中，我的页脚与页面底部附近的元素重叠。

在此处查看实时项目： https ://surpay-app.herokuapp.com/#/?_k=wo17rb

由于这是一个常见问题，我已经查看了有关该主题的许多其他问题，但我认为我的问题与不同的反应组件之间的奇怪行为有关。

我试过调整边缘、正文以及内容。我玩过溢出以及页脚的不同显示样式。这些都不能解决问题。我希望页脚贴在底部（所以我有一个位置：固定）但我不希望它与我的内容重叠。向主体添加底部边距也无济于事。

看起来这应该不是问题，因为页脚是在其余内容之后呈现的组件。这是 JSX：

 render() {
        return (
          <div>
            <Navigation />
            {this.props.children}
            <Footer />
          </div>
        );
}

原文由 Colin Aulds 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要在 body 底部添加边距以解决固定页脚占用的空间：

 body {
  margin-bottom: 80px; // footer height plus 10px
}

原文由 Toby 发布，翻译遵循 CC BY-SA 3.0 许可协议