元素在反应中与其他元素重叠答案

【问题标题】：Elements overlapping other in react元素在反应中与其他元素重叠
【发布时间】：2017-05-01 21:47:17
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： html css reactjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

与反应无关。是你的 CSS 出错了。

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

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

.footer {
    padding: inherit;
}

虽然包裹在一个名为 Footer 的 div 中，但 html 似乎很糟糕。没有意义。

【讨论】：

我正在使用 react-bootstrap。 .footer 类是该框架中 JSX 页脚标记的类名。我的原生组件的名称是 Footer for react。可能有更好的方法来做到这一点，但不是我所知道的。我尝试将 css 更改为您提供的内容，但重叠仍然是一个问题。

【解决方案3】：

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

【讨论】：

【解决方案4】：

我在使用 CSS-Flexbox 时发生了这种情况，试试这个：

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

例如：一个接一个地有两个 React 组件，假设我们要渲染以下内容：

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

【讨论】：