Question

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

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

我已经看过关于这个主题的许多其他问题，因为这是一个常见问题，但我认为我的做法与不同的反应组件相互作用奇怪。

我试着玩边缘，身体以及内容。我玩过溢出以及页脚的不同显示样式。这些都没有解决问题。我希望页脚能够粘在底部（所以我有一个位置：固定）但我不希望它与我的内容重叠。向身体添加底部边距也没有帮助。

似乎这不应该是一个问题，因为页脚是在其余内容之后呈现的组件。这是JSX：

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

Answer 1

您需要在正文底部添加一个边距，以说明固定页脚占用的空间：

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

Answer 2

与反应毫无关系。这是你的错误。

将所有<footer />样式添加到<div class="Footer" />。

.Footer {
    height: 70px;
    position: fixed;
    bottom: 0;
    background: #201D1E;
    padding: 10px 0;
    width: 100%;
}

.footer {
    padding: inherit;
}

将包裹在一个名为Footer的div中只是看起来像坏的html。没有用。

Answer 3

在body上移除height并添加padding-bottom: 70px 在#app将height: 100%更改为min-height: 100vh
在.homePage将height: 400px更改为min-height: 400px
在.Footer删除height: 70px

Answer 4

使用CSS-Flexbox时发生在我身上试试这个：

.mydiv{
  display: flex;
  flex-direction: column;
}

例如：一个接一个地使用两个React组件，假设我们要呈现以下内容：

return(
  <div className="mydiv">
    <Comp1 />
    <Comp2 />
  </div>
)

元素重叠其他反应

4 个答案: