ReactJS – How To Setup 3 Divs One On-Top Of The Other?

Disclaimer:

• I’m new to ReactJS, and web-development as a whole. Did my best to research before, and did not find an answer.
• I’m probably missing something simple, but can’t figure it out – so sorry if this question’s answer is a one liner "How-Did-I-Miss-That’ sort of answer.
• Feel free to comment/answer with best practices I missed, or things I can improve in this question.
• Thanks is advance to anybody that reads this!

My Own Research:

1. Float 3 Divs – I did not need the z-axis property, as non of my divs are on top of the other.
2. 3 Divs LTR – Talks about 3 divs aligned horizontally, not vertically. The same method did not work for me in the vertical axis.
3. 3 Divs LTR #2 – This talks about flex, so I tried it too. In the right direction, but not enough.
4. Vertical Align etc – could not make it happen with this solution either.
5. (5… 1000) A bunch of other first-second-third results in Google search queries like: "ReactJS vertical 3 divs" and the likes.

Actual Question:

Trying to make a basic outline of a mockup web-page, which consists of 3 divs:

1. Header Div – In The Top, Not Sticky (=when you y axis scroll, it does not appear).
2. Content Div – In The Middle, Y/X Axis Scrollable.
3. Bottom Nav Div – In The Bottom, Sticky.

Mockup:

My Current Status:

• Can’t make my bottom-menu div to appear. it’s stuck under the frame.
• Can’t be sure my bottom-menu div is actually sticky because of the point above.
• The contents tab div has no margin from the Header div, which makes the upper end of the text in it – unreadble.

My Code:

Did a lot of back-and-fourth on this, and this is the closest version I have for this simple (yet – not working!) task:

App.jsx

import React from "react"; import BottomMenu from "../BottomMenu/BottomMenu"; import Header from "../Header/Header"; import ContentTab from "../ContentTab/ContentTab";  const App = () => {   return (     <div style = {{display: "flex", flexDirection: "column", overflow: "visible",     direction: "rtl"}}>       <Header/>       <ContentTab />       <BottomMenu />     </div>   ); };  export default App; 

Header.jsx

import React from "react"; import { Toolbar, AppBar } from "@material-ui/core"; import Typography from '@material-ui/core/Typography';  const Header = props => {    return (         <div>           <AppBar color="primary" style={{alignItems: 'center'}}>             <Toolbar>               <Typography>                 Test               </Typography>             </Toolbar>           </AppBar>         </div>   ); };  export default Header; 

ContentTab.jsx

import React from "react"; import Typography from "@material-ui/core/Typography"; import Paper from "@material-ui/core/Paper";  const ContentTab = (props) => {     return (         <div style={{height: "80%", width: "100%"}}>             <Paper align="center" elevation={3}>                 <Typography paragraph>First</Typography>                 <Typography paragraph>TextTab</Typography>                 <Typography paragraph>Last</Typography>             </Paper>         </div>     ); };  export default ContentTab; 

BottomMenu.jsx

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 { Toolbar, AppBar } from "@material-ui/core";  export default function BottomMenu() {     const [value, setValue] = React.useState(0);      return (         <div style={{             position: "fixed", bottom: "0", width: "100%", height: "10%"}}>             <AppBar                 style={{ background: '#FFFFFF', alignItems: "center" }}             >                 <Toolbar>                     <BottomNavigation                         value={value}                         onChange={(event, newValue) => {                             setValue(newValue);                         }}                         showLabels                     >                         <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />                         <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />                         <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />                     </BottomNavigation>                 </Toolbar>             </AppBar>         </div>     ); }