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

Question

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:
Float 3 Divs - I did not need the z-axis property, as non of my divs are on top of the other.
3 Divs LTR - Talks about 3 divs aligned horizontally, not vertically. The same method did not work for me in the vertical axis.
3 Divs LTR #2 - This talks about flex, so I tried it too. In the right direction, but not enough.
Vertical Align etc - could not make it happen with this solution either.
(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:
Header Div - In The Top, Not Sticky (=when you y axis scroll, it does not appear).
Content Div - In The Middle, Y/X Axis Scrollable.
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>
);
}

Answer 1

Actually; the issue is that you're using the Material-UI component AppBar. If this were just a regular DIV tag then you could position it the way you want. To use the AppBar component and make it do what you what then this should do the trick:
remove the outer DIV on the BottomMenu component
style the BottomMenu component's appBar with top of auto and bottom of 0 and give it a position property of fixed.
additionally, style the Header component's appBar with position of static.
this:
in BottomMenu:
<AppBar
position="fixed"
style={{
top: "auto",
bottom: "0",
background: "#FFFFFF",
alignItems: "center"
}}
>
in Header:
<AppBar
position="static"
color="primary"
style={{ alignItems: "center" }}
>
Here's a link to the docs that show it doing what you want:
https://material-ui.com/components/app-bar/
and here's a link to a code sandbox with your code.
https://codesandbox.io/s/material-ui-with-bottom-appbar-ugk31
In general, what I've found with Material-UI is that some of their components have positioning logic built into them and you need to use their properties for positioning instead of trying to do it with CSS.