Question

我想在页面底部（不是位置：固定）添加反应中的页脚，当内容更多时，我应该在滚动到结束后看到页脚，如果内容少，那么它应该显示在底部。如何在React.js中完成？

Answer 1

这可以通过将您的页脚作为一个组件并按照所述here

所述类来完成

Answer 2

你需要的行为看起来就像css中的粘性位置。我建议在这里使用纯css：

footer{
    position: sticky;
}

查看更多here

Answer 3

您可以使用 CSS 来实现flexbox 和 min-height 的强大功能。基本上，容器的 .wrapper 的最小高度为垂直高度的 100%，即：100vh，然后子 components 或 elements（例如 {{1 }}, .navbar 和 .content) 共享高度，你可以让 .footer 承担 .content 的剩余高度，而其他组件承担自己的大小，见下面是解决方案的片段。

.wrapper

.wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 1 0%;
  background-color: whitesmoke;
}
/* You can ignore the styling below */
.app {
  font-family: sans-serif;
}
.footer, .navbar, .content {
 padding: 20px;
 text-align: center;
 border: 1px solid rgba(0,0,0,0.1);
}

您可以在此处阅读有关 flexbox 的更多信息：W3schools CSS Flexbox

您还可以使用我为 ReactJS 创建的沙箱，并应用上述样式：Codesandbox

在React.js粘滞页脚

3 个答案: