Footer hides content of the div above it

user_12828998 0
Viewed 114

Here is the link to codesandbox where I am trying to add a footer but the content above it gets hidden. How can I fix this? What is the mistake I am doing?

The footer component is commented in the app.js file. Scroll to the bottom and see the content and if you uncomment the footer, it will hide the content.

https://codesandbox.io/s/rk4kl

reactjs css html
5 Answers

The main problem is using the position property in the wrong place. the position property is good especially when you're considering boxes.

in your styles.css

.App {
  font-family: sans-serif;
  height: 100%;
  position: relative;
}
.footer {
  position: absolute;
  min-height: 2rem;
  width: 100%;
  text-align: center;
  bottom: 0;
}
.flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}

change it into

.App {
  font-family: sans-serif;
  min-height: 100vh;
}
.footer {
  min-height: 2vh;
  width: 100%;
  text-align: center;
}
.flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 90vh;
}

Explanation: The main idea is that for keeping the footer always have to split the viewport into separate ratios. So that they can always stay with that ratio irrespective of the content. here the div with className App have a min-height of 100vh, which means when we split the viewport into 100 pieces div with App occupies a minimum of 100 slices. Now inside App, we have the flex and footer. We give flex a minimum of 90 pieces and a footer of a minimum of 2. so the footer will always keep in the bottom now.

here is the updated result

user_135913090

Just change position: absolute; to position: relative;

 .footer {
  position: relative;
  min-height: 2rem;
  width: 100%;
  text-align: center;
  bottom: 0;
  
}
user_120836620

I think you are searching for some "Sticky Footer" Solutions, if your Content is not long enough, the footer should be at the end of the page. You could give a margin-top - footer height.

html, body {
  height: 100%;
  margin: 0;
}
.content {
 background-color: blue;
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
background-color: yellow;
  height: 50px;
  margin-top: -50px;
}
<body>
  <div class="content">
    <div class="content-inside">
      content
    </div>
  </div>
  <footer class="footer">Here comes the Footer</footer>
</body>

user_123961670

Use from position static instead absolute for .footer.

When you use position: absolute for an element, it may be placed over other elements. because:

Absolute positioned elements are removed from the normal flow and can overlap elements.

From: https://www.w3schools.com/css/css_positioning.asp

user_170071840

Just remove position "absolute" or add position "relative" to it.

 .footer {
  position: relative;
  min-height: 2rem;
  width: 100%;
  text-align: center;
  bottom: 0;  
}
user_178321500
Related