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

Question

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

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

然后给封闭的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;
  ...
}