I'm currently working on implementing a footer that will be displayed on every page of my Next.js application. To style this, I am utilizing Material UI.
The following component is responsible for defining the layout across all pages of the app:
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>
</>
);
}
The Container element centers its children on the page. The footer has a distinct color compared to the background of other pages, so I aim to have the footer's background cover the entire viewport while keeping its content centered with the rest of the page.
Initially, I attempted achieving this by using translations:
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>
</>
);
}
The issue here was that there was residual whitespace below the footer equal to the height defined for the footer. To address this, I modified the positioning of the footer background and content to use absolute positioning:
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>
);
}
However, even with these adjustments, the footer background still had unwanted space to the left and did not extend fully across the viewport.
If anyone has suggestions or solutions for accomplishing this using React and Material UI, your input would be greatly appreciated. Thank you!