Footer Sticks to bottom of page but overlaps content

Question

My footer sticks to the bottom of the page as I want it to, but as soon as there is enough content on the page to reach the footer, it overlaps said content. I've tried using a position of fixed and relative but neither have worked as I would like. I've also tried the other solutions presented on StackOverFlow but nothing's worked so far. Here's my code.

P.S. I'm not very experienced with HTML and CSS, so if I miss something obvious I apologize.

    <div>
        <footer>
            <p class="footer">&#169; 2018 The Chipotle Bandits. All rights reserved.</p>
        </footer>
    </div>

.footer {
    color: white;
    text-align: center;
    font-size: 12px;
    position: absolute;
    bottom: 0;
    width: 100%;
    flex: 0 0 50px;
}

JSFIDDLE

See if this question can help: [https://stackoverflow.com/questions/21805590/css-sticky-footer](https://stackoverflow.com/questions/21805590/css-sticky-footer) if so please delete your question. — DylanH, Mar 31 '18 at 18:09

Fecosos · Accepted Answer · 2018-03-31T17:56:41.727

0

You can add margin-bottom to the body.

Add to your CSS

body {
  margin-bottom: 30px;
}

edited Mar 31 '18 at 17:56

answered Mar 31 '18 at 17:50

Fecosos

944
7
17

score 0 · Answer 2 · answered Mar 31 '18 at 17:53

This happens because the footer is positioned absolute and is removed from the normal flow of the elements.

In order to achieve this you could try to add a padding bottom to your content, basically to leave some empty space at the bottom of the content equal with the height of your footer.

From your fiddle:

</ul>
        </nav>
        <div style="padding-bottom: 2em">
            <p>Pleased him another wa..

Eric · Answer 3 · 2018-03-31T18:06:46.800

You need to set the height of the footer, and remove position: absolute, or if you want a fixed footer, you can use position: fixed. I removed the margin as well.

Also, separate footer element style and your .footer class style. I renamed the class to footer-text. I centered the text using flex as well.

footer {
  /*
  position: fixed;
  bottom: 0;
  */
  background-color: green;
  width: 100%;
  height: 50px;
  flex: 0 0 50px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-text {
  color: white;
  text-align: center;
  font-size: 12px;    
}

score 0 · Answer 4 · answered Mar 31 '18 at 18:07

You need to give padding-bottom to the body exactly the height of the footer element because the footer is absolutely placed on the bottom of the container. So the content overlap can be corrected by having some gap at the bottom. Update the footer body css as given below

body {
    margin: 0;
    font-family: arial;
    background-color: #363636;
    padding: 0px;
    display: flex;
    flex-direction: column;
    padding-bottom: 38px;
}

Another scenario, If you always want the footer to be visible even while scrolling i.e sticky footer you can use position fixed as given below

.footer {
    color: white;
    text-align: center;
    font-size: 12px;
    position: fixed;
    bottom: 0;
    width: 100%;
    flex: 0 0 50px;
    background-color:#363636;
    z-index: 10;
    margin: 0;
    padding: 10px 0;
}

Footer Sticks to bottom of page but overlaps content

4 Answers4