Footer hides content of the div above it-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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 >
    <div >
      content
    </div>
  </div>
  <footer >Here comes the Footer</footer>
</body>

CodePudding user response：

Just change position: absolute; to position: relative;

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

CodePudding user response：

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

CodePudding user response：

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

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