React Footer 重叠组件

Question

我一直在尝试创建一个粘在底部而不重叠任何组件的页脚，但我遇到了一些困难。

我在索引中使用了以下代码：

.footer{
  margin-top: 1rem;
  padding: 1rem;
  background-color: #3D938B;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

我还添加了页脚，就像页面中的任何其他组件一样...

<Router>
  <NavBar></NavBar>
  <div className={classes.topMargin}>
    <Route exact path="/contact-us" element={<ContactUs/>}/>
  </div>
  <Footer></Footer>
</Router>

我的联系我们页面具有以下 CSS：

@media only screen and (max-width: 700px) {
    .form-container {
        text-align: center;
    }
    .button-submit {
        background-color: white;
        width:7rem;
        border-radius: 10px;
        border: 2px solid #3D938B;
        color: #3D938B;
        padding: 5px;
        margin-bottom:20px;

    }
}

提前致谢！！

Answer 1

您可以使用它使页脚固定在底部而不与其他元素重叠。

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#footer {
  background-color: #3D938B;
  flex: 0 0 50px;
  margin-top: auto;
}