Реагируйте с помощью MUI: как создать нижний колонтитул ⇐ CSS

[Anonymous]

У меня есть нижний колонтитул внизу моей страницы, где я хочу следующее:

• Находиться полностью внизу после содержимого страницы.
• Находиться внизу экрана, если контента недостаточно для заполнения страницы.
• Я использую React с пользовательским интерфейсом Material
  

Я нашел несколько руководств, использующих высоту нижнего колонтитула в качестве буфера, но это требует жесткого кодирования, высота. (Например, где я взял картинку: ссылка.)
Я также нашел руководства по использованию 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) {
return (






{children}


Example footer!





);
}

Есть идеи, что я здесь делаю не так?

Подробнее здесь: https://stackoverflow.com/questions/790 ... d-a-footer