如何将内容保留在 React 组件的页脚和页眉中？

Question

我知道这可能会被问到很多，但不知何故我找不到解决方案。我在 React 中的项目和我的顶级组件是这样设置的：

<Provider store={store}>
  <Router>
    <Header />
    <Switch>
      <All the routes />
    </Switch>
    <Footer />
  </Router>
</Provider>

如您所见，我想在所有页面中使用页眉和页脚。使用我当前的设置，当我的内容高度大于视图高度时它可以工作。我的意思是页脚总是在底部。问题出现在我的页面内容小于视图高度但我的页脚仍略低于视图高度的较小页面上。

我当前的 css 代码（不包括不必要的代码）：
标题

padding: "0.2em 4em"

内容包装器

minHeight: "100%",

页脚

padding: "3em"

链接上的其中一个页面（显示页脚如何位于vh 下方。页眉作为默认块元素位于顶部并且很好）：Result

Answer 1

在这种情况下你应该使用 flexbox。您的代码在做出反应，但我会尝试使用 html 和 css，以便您了解必须应用的规则。看这个例子：

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

.header {
  position: sticky;
  top: 0;
  padding: 15px 5px;
  background-color: pink
}

.footer {
  padding: 15px 5px;
  background-color: pink;
  margin-top: auto;
}

<div class="app">
  <div class="header">
    Your Header
  </div>

  <div class="app-content">
    Your will have routes here that will render your components as required
  </div>

  <div class="footer">
    Your Footer
  </div>
  <div>

这里的技巧是在页脚上使用margin-top，它会产生您正在寻找的结果。

如果您对此有任何其他问题或困惑，请告诉我。