使用 Flexbox 在 GatsbyJS 中实现粘性页脚
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
我最近基于GatsbyJS开发了一些静态网站，这些网站都带有固定页脚。即使内容很少，固定页脚也会始终位于页面底部。
遗憾的是，我解决这个问题遇到了一些困难，因此我想和你们分享我的经验。
非 GatsbyJS 解决方案
在传统的 HTML、CSS、JavaScript 应用程序中，我们可以使用不同的方法来实现这种固定的页脚，但我更喜欢Philip Walton 的 Flexbox 解决方案。
Flexbox 为固定页脚问题提供了一个不错的解决方案。它可用于水平和垂直方向的内容布局。因此，我们只需将垂直部分（页眉、内容、页脚）包裹在一个 Flexbox 容器中，并选择哪个部分需要扩展即可。在本例中，我们希望内容自动占据容器中的所有可用空间。
下面你可以看到他的解决方案：
<body class="site">
<header>…</header>
<main class="site-content">…</main>
<footer>…</footer>
</body>
对应的 CSS 类：
.site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.site-content {
flex: 1;
}
观看在线演示。
GatsbyJS 解决方案
GatsbyJS 基于 React，因此我们需要另辟蹊径。
官方 GatsbyJS 默认启动器layout.js中的基本文件结构与以下示例类似：
const Layout = ({ children }) => (
<StaticQuery
query={graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`}
render={data => (
<>
<Helmet
title={data.site.siteMetadata.title}
meta={[
{ name: 'description', content: 'Sample' },
{ name: 'keywords', content: 'sample, something' },
]}
>
<html lang="en" />
</Helmet>
<Header siteTitle={data.site.siteMetadata.title} />
<div>{children}</div>
<Footer />
</>
)}
/>
);
export default Layout;
所以，如果我们按照Philip Walton 的解决方案中提出的<body></body>样式进行设计，那将行不通。<div>{children}</div>
但为什么呢？因为这意味着该<Footer/>组件将被包含在……中<body></body>。
为了解决这个问题，我添加了一个新标签，它与上面提到的示例中的标签<div></div>等效。<body></body>
我的layout.js长相是这样的：
const Layout = ({ children }) => (
<StaticQuery
query={graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`}
render={data => (
<>
<Helmet
title={data.site.siteMetadata.title}
meta={[
{ name: 'description', content: 'Sample' },
{ name: 'keywords', content: 'sample, something' },
]}
>
<html lang="en" />
</Helmet>
<div className="site">
<Header siteTitle={data.site.siteMetadata.title} />
<div className="site-content">{children}</div>
<Footer />
</div>
</>
)}
/>
);
export default Layout;
CSS：
.site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.site-content {
flex-grow: 1;
}
您可以在我的GitHub Traffic Viewer 网站上看到一个示例。首页内容较少，但页脚固定在页面底部。如果您登录并查看结果列表，页脚也会显示在页面底部。
如果您尝试在 GatsbyJS 网站中实现固定页脚，希望这篇文章也能对您有所帮助。
祝您编程愉快！
文章来源：https://dev.to/mokkaapps/sticky-footer-in-gatsbyjs-using-flexbox-5162