How to leave my footer always below? [closed]

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

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 body must be at least 100% of height and that the footer will be fixed at the bottom of the page.

However, your current code is not working because the .wrapper element also has the position property set to absolute , which will bypass its placement on the page. Just remove this property and your code will work.

Do the following, invert the positions of your wrapper and its footer .

Try to set position: relative to its wrapper and position: absolute in its footer .

This way your footer gets absolute inside your wrapper.