如何用React+Material UI在Next.js中实现非粘性Footer

我正在为Next.js应用创建一个非粘性（non-sticky）Footer，要求它显示在每个页面上，使用Material UI进行样式设置。

以下是定义应用页面布局的组件代码：

import React from "react";
import NavBar from "./NavBar";
import Header from "./Header";
import styles from "../styles/Layout.module.css";
import { Container } from "@mui/material";
import Footer from "./Footer";

export default function Layout(props) {
  return (
    <>
      <NavBar></NavBar>
      <Container className={styles.container}>
        <main className={styles.main}>
          <Header />
          {props.children}
          <Footer />
        </main>
      </Container>
    </>
  );
}

Container组件会将其子元素在页面中居中。Footer的背景色与页面背景不同，我希望Footer背景铺满整个视口，但Footer内容仍与页面其他内容保持居中对齐。

我最初尝试通过平移内容来实现：

import React from "react";

const footerHeight = 300;
const footerEltMarginTop = 15;

const div1Style = {
  width: "100vw",
  height: `${footerHeight + footerEltMarginTop}px`,
  backgroundColor: "blue",
};

const div2Style = {
  transform: `translate(0px, -${footerHeight}px)` ,
  color: "white",
  width: "100%",
  height: `${footerHeight}px`,
  marginTop: `${footerEltMarginTop}px`,
};

export default function Footer() {
  return (
    <>
      <div style={div1Style}></div>
      <div style={div2Style}>
        <div>footer content</div>
      </div>
   </>
  );
}

但这种方式的问题是Footer下方留下了高度为footerHeight的空白。

于是我尝试将Footer背景和内容设置为绝对定位：

import React from "react";

const footerHeight = 300;
const footerEltMarginTop = 15;

const div1Style = {
  width: "100vw",
  height: `${footerHeight + footerEltMarginTop}px`,
  backgroundColor: "blue",
  marginTop: "30px",
  position: "absolute",
};

const div2Style = {
  width: "100%",
  position: "absolute",
  color: "white",
  height: `${footerHeight}px`,
  marginTop: `${footerEltMarginTop}px`,
};


export default function Footer() {
  return (
    <div style={{width: "100%"}}>
      <div style={div1Style}></div>
      <div style={div2Style}>
        <div>footer content</div>
      </div>
    </div>
  );
}

但这种方式的问题是Footer背景左侧出现空白，无法铺满整个视口。

请问如何用React + Material UI实现该需求？

内容的提问来源于stack exchange，提问作者always_learning