Having trouble with my web app's footer not staying at the bottom when there is minimal content on the page. I'm feeling stuck and unsure of how to proceed. Can anyone provide guidance on creating a footer that remains at the bottom of the page, regardless of the amount of content?
const routes = (
<Router>
<div>
<div>
<Navbar />
<Route exact path="/" component={() => (<Redirect to='/home' />)} />
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
<Route path="/films" component={Films} />
<Route path="/markets" component={Markets} />
<Route path="/news" component={News} />
<Route path="/contact" component={Contact} />
<Route path="/admin" component={Admin} />
<Footer />
</div>
</div>
</Router>
)
CSS:
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}
This is what it currently looks like: