在 React 中，页脚不会停留在页面底部和内容下方答案

【问题标题】：Footer won't stay at bottom of page and below content in React在 React 中，页脚不会停留在页面底部和内容下方
【发布时间】：2022-08-24 13:53:04
【问题描述】：

我有一个具有这种基本布局的 React 应用程序：

function App() {
  return (
    <div className=\"app\">
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

export default App;

我的问题是我对这些组件中的每一个都有单独的样式表，但是我不能让我的页脚既位于页面底部，又始终位于内容下方。也就是说，如果页面是空白的，页脚仍将位于底部，如果有大于视口高度的内容，页脚仍将保留在其下方。

我已经看到了这个问题的答案，但仅限于常规 HTML 页面，而不是具有不同样式表的不同 React 组件。我的每个 App 组件都有一个 index.css、App.css 和 CSS 页面。

有什么办法我应该去做吗？我应该添加哪个样式表以使页脚保持在内容的底部和下方。我目前在我的Footer.css 中有代码，但代码不会将页脚保留在页面底部和内容下方。

我认为问题在于通常所有组件都在 body 内的同一个 HTML 页面上，但 React 的分解方式略有不同。任何帮助都会很棒。

标签： javascript html css reactjs

【解决方案1】：

例如，您可以在 index.css 内添加以下行。如果需要，您可以将 auto 更改为固定值，例如 100px。

.app {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 3rem;
}

【讨论】：

【解决方案2】：

您需要将样式添加到全局容器：

 html,body,#root {
   display: flex;
   flex-direction: column;
   min-height: 100%;
  }

然后将样式添加到您的页脚组件：

.footer {
 padding-top: auto;
}

我不建议使用

min-height: 100vh;

由于其计算方式，它将在移动设备上中断。

【讨论】：

【解决方案3】：

在index.css 中添加：

Footer {
width: 300px;
text-align: center;
position: relative;
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}

示例：https://codesandbox.io/embed/quirky-sound-bitt9k?fontsize=14&hidenavigation=1&theme=dark

如果您希望页脚部分相对于视口而不是相对于页面内容显示在页面底部，则可以更改 position: fixed;。

供您参考的来源：

https://getridbug.com/html/transform-translate-50-50/ https://www.w3schools.com/css/css_positioning.asp

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案4】：

我在使用 grid 和 grid-template-rows 时遇到了问题，但切换到 flex 就成功了。

我的理解是，无论视口高度如何，使用flex-direction: column; 和justify-content: space-between; 将我的三个组件隔开并强制我的<Footer /> 在<Main /> 下方。

如果有人更好地理解为什么我的答案比其他人更好，我希望得到解释。

index.css 文件：

.app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。