Next.js 中的页脚

Question

编辑：我试图将页脚放在页面的最后。现在它不会去那里，页面末尾有一些 space

我读到有关#__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>
  );
}

Answer 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 允许 children 对齐并垂直生长，.

接下来，告诉main总是用flex: 1填充白色的space内容。由于您的页眉在前面，因此不会影响它，但是，因为您的页脚在后面 - 这会将页脚推到页面底部。

更新

这是您的原始 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

Next.js 中的页脚

Footer in Next.js

css

next.js

footer

更新