Next.js 中的页脚答案

【问题标题】：Footer in Next.jsNext.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 我的错。刚刚添加

标签： css next.js footer

【解决方案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> ); };
我更新了示例 - 确保您没有覆盖这些的样式。
太棒了。非常感谢您的帮助。真的很感激