Angelo A Angelo A - 4 months ago 9
HTML Question

Footer is not sticking at the bottom

No matter what I try (tutorials / posts on stackoverflow, w/e) I can't make my footer to stay at the bottom of my website.

I've created this custom theme for Wordpress (I didn't post it on wordpress stackexchange, because this is rather a CSS question than a WP question). Anyways, this is my website:
http://plexus-orthopedie.nl/wordpress/?page_id=1941

I did not put any content in my footer or any CSS so if anyone wants to try CSS code, it's easily possible.

The footer is located in:

html > body > div#page > footer.site-footer


Thanks in advance!

Answer

maybe add something like this to your css style.

#page .site-footer {
    background-color: #123456;
    width: 100%;
    position: fixed;
    height: 100px;
    bottom: 0;
}

I added a background-color to make it visible for now.

EDIT:

If you want the footer only to show on the bottom, not scrolling with you , add this instead of the above:

#page .site-footer {
    background-color: #123456;
    width: 100%;
    position: relative;
    height: 100px;
    margin-top: 100%;
}


EDIT 2
I found the problem!

You have to change your div#content style.

Instead of

div#content{
    position: absolute;
}

use this:

 div#content{
     position: relative;
 }

And change your style for #page .site-footer to this:

#page .site-footer {
    background-color: #123456;
    width: 100%;
    position: relative;
    height: 100px;
    bottom: 0;
}

The problem was caused by the position:absolute in #content.

Comments