How do I keep the footer from overlapping div?

Question

I am creating a reactJS app and I am having trouble with keeping the footer in the bottom of the page. The footer stays at the bottom of the page initially, but the SPDashboard dynamically populates the page and it grows bigger and the footer does stay in the bottom, but it overlaps with the page. How can I keep the footer at the bottom AND keep it from overlapping with the div.dashboard?

Here is the code:

.monitoring-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 75px;
  width: 100%;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  height: 12vh;
}

<div className="App">
  <header style={{backgroundColor: '#014e8c'}}>
    <h1 className="App-header">Tool</h1>
  </header>
  <div className="dashboard" style={{justifyContent: 'center', marginTop: '3vh'}}>
    <SPDashboard/>
    <CDashboard/>
  </div>
  <footer className="monitoring-footer" style={{backgroundColor: '#014e8c', marginTop: '45px', justifyContent: 'center'}}>
    <p> footer</p>
    <p>Email: <a href="mailto:email@email.com">email@email.com</a></p>
  </footer>
</div>

score 0 · Answer 1 · answered Feb 03 '22 at 22:34

This happens because you have set the footer's position to be absolute which causes it to ignore the elements flow.

Because you said SPDashboard dynamically populates the page then setting the footer's position to relative will make the footer stick to bottom of the content and if the content does not fill the whole page then the footer will not stick to the bottom of it.

You can try using the first answer here: How to push a footer to the bottom of page when content is short or missing?.

This answer uses flexbox to make the footer stick to the bottom of the page even though the content does not fill the whole page.

score 0 · Answer 2 · answered Feb 03 '22 at 22:36

You can also use flex, something like:

.App{
display: flex;
flex-direction: column;
justify-content: space-between;
min-height:100vh;
}
.dashboard{
padding: 10px;
min-height: calc(100vh - 12vh - 75px);
height: 200vh;
}
.monitoring-footer {
  background-color: #014e8c;
  height: 75px;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  height: 12vh;
 background-color: #014e8c;
}

<div class="App">
  <header style={{backgroundColor: '#014e8c'}}>
    <h1 class="App-header">Tool</h1>
  </header>
  <div class="dashboard" style={{justifyContent: 'center', marginTop: '3vh'}}>
        CONTENT
    <!-- <SPDashboard/> -->
    <!-- <CDashboard/> -->
  </div>
  <footer class="monitoring-footer" style={{backgroundColor: '#014e8c', marginTop: '45px', justifyContent: 'center'}}>
    <p> footer</p>
    <p>Email: <a href="mailto:email@email.com">email@email.com</a></p>
  </footer>
</div>

score 0 · Answer 3 · answered Feb 03 '22 at 22:55

So as far as I have understood your question, You want the footer to be fixed to the bottom when there is no or less content and behave normally when there is quite some content. You can do this by adding the following code to the parent div which contains the footer, header and content. You can adjust the height of your header and footer as grid-template-rows: header 1fr footer;

  .parent {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

score -1 · Answer 4 · answered Feb 03 '22 at 22:32

try this: your body content grows, probably you are not taking into account the height of your footer.

.dashboard {
  margin-bottom: 75px; 
}

/* 75px or the footer heigh value. A better way to do this could be: */

body {
  height: calc(100%-75px); 
}

here are a lot of ways

How do I keep the footer from overlapping div?

4 Answers4