Question

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

    <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;
}

，然后为封闭的div container指定相对位置。（您可以将一个类添加到容器中。）

.container{
  position: relative;
  min-height: 100vh;
}

这可确保页脚相对于其父级绝对定位。

最后，由于填充的高度为35px，因此您需要在AppContent处添加底部填充，以便页脚不会覆盖内容。

.AppContent {
  background-color: rgba(229, 255, 0, 0.404);
  padding: 1.5rem 2rem 35px 2rem;
  min-height: 100%;
}

Answer 2

您的页脚必须为“固定”，而不能为“绝对”。

.Footer {
  position: fixed;
  ...
}

语义用户界面反应；页面底部的页脚

2 个答案: