To avoid using position absolute/fixed due to the lack of a defined height, you can implement a flex container that automatically fills the body with a height: 100vh;. Within this structure, place your content-holder component with styles like flex:1; for maximum expansion and overflow-y: auto; to display a scrollbar if necessary. The actual content goes inside the content-holder.
BottomNavigation should be placed alongside content-holder and will always remain at the bottom.
You can refer to the following example on CodeSandbox, where the relevant code is also provided below:
// JavaScript code snippet
import React from "react";
import BottomNavigation from "@material-ui/core/BottomNavigation";
import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";
import RestoreIcon from "@material-ui/icons/Restore";
import FavoriteIcon from "@material-ui/icons/Favorite";
import LocationOnIcon from "@material-ui/icons/LocationOn";
import "./styles.css";
export default function App() {
return (
<div className="app">
<div className="content-holder">
<div className="content">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
</div>
<BottomNavigation>
<BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
<BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
<BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
</BottomNavigation>
</div>
);
}
/* CSS styling */
body {
margin: 0;
padding: 0;
}
.app {
font-family: sans-serif;
text-align: center;
background-color: lightgreen;
display: flex;
flex-direction: column;
height: 100vh;
}
.content-holder {
flex: 1;
overflow-y: auto;
}
.content {
/* This style is optional since it grows based on the content */
min-height: 200vh;
}