Next.js 中的页脚
Posted
技术标签:
【中文标题】Next.js 中的页脚【英文标题】：Footer in Next.js 【发布时间】：2021-11-15 18:53:09 【问题描述】：编辑：我试图将页脚放在页面的最后。现在它不会去那里，页面末尾有一些空间
我读到 #__next 会导致问题，我尝试了很多替代方案；依然没有。我可能做错了什么，但我无法在展开页面时保留页脚和最底部。
function MyApp( Component, pageProps )
return (
<StyledEngineProvider>
<Layout>
<Head>
<title>Covid19 Real Time Data</title>
<meta
name="viewport"
content="initial-scale=1.0, width=device-width"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
</Head>
<Component ...pageProps />
</Layout>
</StyledEngineProvider>
);
global.css
html,
body
padding: 0;
margin: 0;
scroll-behavior: smooth;
font-family: 'Roboto', sans-serif;
#__next
display: flex;
flex-direction: column;
min-height: 100vh;
纸质css
.paper
display: flex;
flex-direction: column;
min-width: fit-content;
min-height: 100vh;
页脚组件
function Copyright()
return (
<Typography variant="body2" color="text.secondary">
'Copyright © '
<Link color="inherit" href="https://www.linkedin.com/in/fabio-catino/">
Fabio Catino
</Link>' '
new Date().getFullYear()
</Typography>
);
export default function StickyFooter()
return (
<Box
component="footer"
sx=
py: 3,
px: 2,
pd: 3,
width: '100%',
// position: 'absolute',
bottom: 0,
backgroundColor: (theme) =>
theme.palette.mode === 'light'
? theme.palette.grey[200]
: theme.palette.grey[800],
>
<Container maxWidth="sm">
<Copyright />
</Container>
</Box>
);
【问题讨论】：
嗨@FabioC！你能详细解释一下你的问题吗？ 抱歉，我无法将您的问题与示例代码联系起来。你能说得更具体点吗？ 我编辑了帖子，但基本上我试图摆脱页脚下的空白区域，让页脚始终位于底部 你还没有分享你的页脚组件代码... @kazim066 我的错。刚刚添加 【参考方案1】：我没有您的完整布局，但以下是您的页脚始终位于页面底部或大陆（以较大者为准）的底部。
HTML 所需布局 - 仅供参考
<html> // root
<body> // body
<div id="__next"> // default next container
<header /> // your header
<main /> // your main content
<footer /> // your footer
</div>
</body>
</html>
由于html 和body 在_document 中处理，#__next 是自动注入的 - 您只需设置您的内容 - header、main 和 footer。
__app.jsx|tsx
const MyApp = ( Component, pageProps ) => (
<> // Fragment shorthand
<header /> // your header
<main>
<Component ...pageProps />
</main>
<footer /> // your footer
</>
);
基本样式
:root, body
height:100%;
margin: 0;
padding:0;
width: 100%;
#__next
display: flex;
flex: 1;
flex-direction: column;
height:100%;
width: 100%;
main
display: flex;
flex: 1;
flex-direction: column;
#__next、HTML (:root)和body需要覆盖整个页面，将height和width设置为100%。
您的内容父容器 - #__next - 必须是 flex，以便子项可以根据需要增长或缩小。 flex-direction: column 允许孩子垂直对齐和成长，.
接下来，告诉main 始终用flex: 1 填充空白内容。由于您的页眉在前，因此对其没有任何影响，但是，因为您的页脚在后 - 这会将页脚推到页面底部。
更新
这是你的原始 html 布局
const MyApp = ( Component, pageProps ) => (
<div id="paper">
<header />
<main>
<Component ...pageProps />
</main>
<footer />
<ScrollTop />
</div>
);
:root, body, #__next // move next up
height:100%;
margin: 0;
padding:0;
width: 100%;
#paper
display: flex;
flex: 1;
flex-direction: column;
height:100%;
width: 100%;
main
display: flex;
flex: 1;
flex-direction: column;
See codesandbox example
【讨论】：
嗨，肖恩。感谢你的回复。不幸的是，它不起作用。我的布局是<HTML> <head/> <body> <div id="__next"> <main>...</main> </div> </body>
页脚在 __next div 内。标头在 Layout.js 中，所以总是在 __next div 中。
<ThemeProvider theme=darkMode> <Paper className=styles.paper> <Navbar onAddTheme=darkModeHandler /> <main className=styles.main>props.children</main> <StickyFooter className=styles.footer></StickyFooter> <ScrollTop ...props> <Fab color="primary" size="small" aria-label="scroll back to top"> <KeyboardArrowUpIcon /> </Fab> </ScrollTop> </Paper> </ThemeProvider> ); ;
我更新了示例 - 确保您没有覆盖这些的样式。
太棒了。非常感谢您的帮助。真的很感激以上是关于Next.js 中的页脚的主要内容，如果未能解决你的问题，请参考以下文章
Next.js - 页脚/页眉仅通过 API 加载一次，服务器端
next.js 中的 apollo-client 与 `next-with-apollo` VS next.js 文档常见问题解答中显示的方法（不使用 `getDataFromTree`）