CODEWITHSUNDEEP
htmlcssreactjs
Uriah RV
Uriah RV

Reputation: 105

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

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

Upvotes: 1

Views: 5023

Answers (1)

Prabin Poudel
Prabin Poudel

Reputation: 369

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.

Upvotes: 3

Related Questions