使用 MUI 进行反应：如何构建页脚

Question

我的页面底部有一个页脚，我想要以下内容：

一直在页面内容之后的底部
如果没有足够的内容填满页面，则位于屏幕底部
我正在使用 React 和 Material UI

我发现一些指南使用页脚的高度作为缓冲区，但这需要对该高度进行硬编码。（比如我从哪里得到的图片：link。）

我还发现了使用flexbox的指南，虽然这看起来很简单，但我无法让它在react中工作。我已经尝试过这个例子。

代码：

import type { Metadata } from "next";

import "./globals.css";

import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";
import Box from "@mui/material/Box";
import { AppBar, Typography } from "@mui/material";

export const metadata: Metadata = {
  title: "Footer example",
  description: "How can footers be hard?"
};

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en">
      <body>
        <AppRouterCacheProvider>
          <Box
            sx={{
              height: "100%",
              display: "flex",
              flexDirection: "column"
            }}
          >
            <AppBar sx={{ height: "80px" }} />
            <Box
              sx={{
                flexGrow: 1,
                flexShrink: 0,
                flexBasis: "auto"
              }}
            >
              {children}
            </Box>
            <Box
              sx={{
                backgroundColor: "lightblue",
                flexShrink: 0
              }}
            >
              <Typography>Example footer!</Typography>
            </Box>
          </Box>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

知道我在这里做错了什么吗？

Answer 1

Flexbox 布局：列 Flex 布局确保页脚位于页面底部或在足够长时跟随内容。

为此我们需要=>

 <Box sx={{
    minHeight: "100vh",
    display: "flex",
    flexDirection: "column",
  }}
>
  <AppBar sx={{ height: "80px" }} />
  
  <Box sx={{
      flexGrow: 1,
      flexShrink: 0,
      flexBasis: "auto",
    }}
  >
    {children}
  </Box>
  
  {/* Footer */}
  <Box
    sx={{
      backgroundColor: "lightblue",
      flexShrink: 0, 
    }}
  >
    <Typography>Example footer!</Typography>
  </Box>
</Box>

使用 MUI 进行反应：如何构建页脚

问题描述投票：0回答：1

1个回答

最新问题

使用 MUI 进行反应：如何构建页脚

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1