How do I keep my footer down?

Asked

Viewed 6,208 times

1

css footer
  • 1

    Possible duplicate of Footer at the end of the document

  • Thanks for the @leofonts reference, but it wasn’t exactly what I was looking for this link you passed on. I was also having footer problem going up together when the viewport was decreased. But with the help of Celsomtrindade I was able to solve.

2 answers

7


One of the main reasons I don’t like using this technique is because it involves the position: absolute, which does not work in the case of a dynamic (responsive) website as it depends on the definition of the padding-bottom. What I have used is the use of display:flex in body. Something like that:

html {
    height: 100%;
    min-height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

footer {
    margin-top: auto;
}

In this way, you declare that the body must be at least 100% high and the footer shall be fixed at the bottom of the page.

However, your current code is not working because the element .wrapper also owns the property position defined as absolute, which will ignore its placement on the page. Simply remove this property and your code will work.

  • Thanks @Celsomtrindade, this helped to solve my problem. I also deleted the wrapper that was only getting in the way. If you want to see how it turned out: http://codepen.io/xmauricioo/full/Zemzvv/.

  • @Mauriciosantos cool, simplified enough right? Nice that I could help! If the answer solved your problem, do not forget to mark as "accepted" =D

  • done. @Celsomtrindade. Thank you!

  • 1

    Best solution ever found :)

-1

Do this, reverse the positions of your wrapper and of his footer.

Try to get position: relative in his wrapper and position: absolute in his footer.

That way your footer stays absolute inside your wrapper.

  • I tried and it didn’t work, I ended up removing the wrapper that was only in the way and no use. Thank you!.

Browser other questions tagged css footer

You are not signed in. Login or sign up in order to post.