I'm facing an issue with the footer on my webpage. Here are my requirements:
- It should always be positioned at the bottom after the page content
- If there isn't enough content to fill the page, it should still stick to the bottom of the screen
- I am currently working with React and Material UI https://i.sstatic.net/TVOWXsJj.png
Some resources suggest using the footer height as a buffer, but that involves hardcoding the height (like in this guide).
I've also tried implementing flexbox as per some tutorials, but I seem to struggle getting it to work within a React environment. I attempted to replicate this example.
Here's a snippet of the code:
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>
);
}
Can someone help me identify what might be causing the issue?