Sticky footer covering content and not sticking to the bottom of the page when scrolling

46 Views Asked by id4862 At 28 December 2023 at 22:35

I wanted to include a sticky footer on my page that sticks to the bottom of the page, and it does, but if the content of the page is longer and I need to scroll down, the footer stays at the bottom of the visible page, covering the content and if I scroll, the content comes out from under the footer. I've asked ChatGPT several times, but every time, it has given me a solution that doesn't work for me. I´ll also add it below.

This is the code: HTML

<footer class="footer">
   hi
</footer>

CSS

.footer {
  background-color: #4f2e61;
  padding: 5px 30px;
  color: #f2f2fc;
  position: fixed;
  width: 100%;
  text-align: left;
  margin-right: 5em;
  left: 0;
  bottom: 0;
}

ChatGPT's code:

HTML

<body>
  <div class="content">
    ...
  </div>
  <footer class="footer">
    ...
  </footer>
</body>

CSS

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
}

Thanks for the help!

Original Q&A

There are 1 best solutions below

alaanvv On 28 December 2023 at 22:42

For the way you are writing your CSS, it would be easy to just make it a position absolute

CSS

.footer {
          background-color: #4f2e61;
          padding: 5px 30px;
          color: #f2f2fc;
          position: absolute;
          width: 100%;
          text-align: left;
          margin-right: 5em;
          left: 0;
          bottom: 0;
    }

If absolute don't work, try relative

Sticky footer covering content and not sticking to the bottom of the page when scrolling

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in FOOTER

Related Questions in STICKY-FOOTER

Trending Questions

Popular # Hahtags

Popular Questions