Semantic-ui-react;页面底部的页脚

Question

在我的使用语义ui-react的React应用程序中，将所有组件都放在<Container fluid>组件中。

CodeSandbox

    <Container fluid>
      <Navbar />
      <div className="AppContent">
        <Content />
      </div>
      <Footer />
    </Container>

以及如下所示的css文件中的自定义样式。

body {
  overflow-x: initial !important;
  display: inline-block;
  min-width: 100% !important;
  height: 100% !important;
}
.AppContent {
  padding: 1.5rem 2rem 1rem 2rem;
  min-height: 100%;
}

.Footer {
  position: relative;
  bottom: 0;
  width: 100%;
  height: 35px;
}

现在，我希望将小礼物放在页面的底部。

添加min-height:100vh将在内容很少时出现不必要的滚动条，并且在此当前代码页脚到达内容的末尾，该末尾可以在页面的中间。

我对CSS在这里如何工作感到非常困惑。任何帮助表示赞赏。

Answer 1

您的页脚应具有绝对位置而不是相对位置。

.Footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 35px;
}