如何在 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. header 作为默认块元素保留在顶部并且很好）：结果

Answer 1

在这种情况下你应该使用flexbox。你的代码是反应的，但我会尝试使用 html 和 css，这样你就可以理解你必须应用的规则。看这个例子：.app {&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; min-height: 100vh;}.header {&nbsp; position: sticky;&nbsp; top: 0;&nbsp; padding: 15px 5px;&nbsp; background-color: pink}.footer {&nbsp; padding: 15px 5px;&nbsp; background-color: pink;&nbsp; margin-top: auto;}<div class="app">&nbsp; <div class="header">&nbsp; &nbsp; Your Header&nbsp; </div>&nbsp; <div class="app-content">&nbsp; &nbsp; Your will have routes here that will render your components as required&nbsp; </div>&nbsp; <div class="footer">&nbsp; &nbsp; Your Footer&nbsp; </div>&nbsp; <div>这里的技巧是在页脚上使用margin-top，它将产生您正在寻找的结果。如果您对此还有任何疑问或困惑，请告诉我。