How to keep content inside Footer and Header in React Component? - html

Question

I know this might be asked a lot but somehow I can't find the solution. My project in React and my top component is setup up like this:
<Provider store={store}>
<Router>
<Header />
<Switch>
<All the routes />
</Switch>
<Footer />
</Router>
</Provider>
As you can see I want to use Header and Footer in all my pages. With my current setup, it works when my content height is bigger than view-height. I mean footer stays always on the bottom. The problem becomes on my smaller pages where the page content is smaller than view-height but my footer is still slightly below the view-height.
My current css code (didn't include unnecessary code):
Header
padding: "0.2em 4em"
Content-Wrapper
minHeight: "100%",
Footer
padding: "3em"
One of the pages on the link (that shows how footer is below the vh. Header stays at the top as a default block element and is fine ): Result

Answer 1

you should make use of flexbox in this case. Your code is in react but I will try to use html and css so you can understand the rules you have to apply. Look at this example:
.app {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
position: sticky;
top: 0;
padding: 15px 5px;
background-color: pink
}
.footer {
padding: 15px 5px;
background-color: pink;
margin-top: auto;
}
<div class="app">
<div class="header">
Your Header
</div>
<div class="app-content">
Your will have routes here that will render your components as required
</div>
<div class="footer">
Your Footer
</div>
<div>
Trick here is to use margin-top on footer and it will produce the result you are looking for.
Let me know if you have any further question or confusion on this.