I have a footer at the bottom of my page, where I want the following:

• Be all the way at the bottom after the content of the page
• Be at the bottom of the screen if there's not enough content to fill the page
• I am using React with Material UI

I've found some guides using the height of the footer as a buffer, but that requires hardcoding that height. (Such as where I got the picture: link.)

I've also found guides using flexbox, and while that seems easy enough, I can't get it to work within react. I've tried this example.

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 (
    
      
        
          
            
            
              {children}
            
            
              Example footer!
            
          
        
      
    
  );
}

Any idea what I'm doing wrong here?