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

Question

我知道这可能会被问到很多，但是以某种方式我找不到解决方案。我在React中的项目和我的主要组件都是这样设置的：

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

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

我当前的CSS代码（未包含不必要的代码）：标头

  padding: "0.2em 4em"

Content-Wrapper

  minHeight: "100%",

页脚

  padding: "3em"

链接上的页面之一（显示页脚在vh下方的位置。页眉作为默认的块元素停留在顶部，并且很好）：https://i.stack.imgur.com/lWCXS.png

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，它将产生您想要的结果。

让我知道您是否对此还有其他疑问或困惑。