如何在 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 {

  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，它将产生您正在寻找的结果。

如果您对此还有任何疑问或困惑，请告诉我。