Why is the Footer component not at the bottom of the screen in Next.js Styling?
import Head from "next/head";
import Navbar from "./Navbar";
import Footer from "./Footer";
const layoutStyle = {
display: "flex",
flexDirection: "column",
height: "100%",
width: "100%"
};
const Layout = props => (
<div className="Layout" style={layoutStyle}>
<Head>
<title>Oracle</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charSet="utf-8" />
</Head>
<Navbar />
<div>{props.children}</div>
<Footer/>
</div>
);
export default Layout;
footer
import React, { Component, Fragment } from "react";
class Footer extends Component {
render() {
return (
<div className="bg-gray-100">
<div className="bg-gray-100 container mx-auto px-6 pt-10 pb-6" >
>
© Oracle Corp. All rights reserved.
</div>
</div>
)
}
}
export default Footer;
This issue seems to be related to Next.js, but I'm unsure how to resolve it :/
I suspect it has something to do with how Next.js sets up each page.
Thank you for your help,