Footer is not sticking at the bottom

2 Views

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

Read More

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!

Post Views: 2

Related posts

Leave a Reply

7 comments

  1. 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.

  2. use one that trick:

    1. http://css-tricks.com/snippets/css/sticky-footer/
    2. http://getbootstrap.com/examples/sticky-footer

    OR

    css

    /* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

    html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Sticky Footer Template for Bootstrap</title>
  </head>

  <body>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Sticky footer</h1>
      </div>
    </div>

    <div id="footer">
        <p class="text-muted">Place sticky footer content here.</p>
    </div>
  </body>
</html>

  3. OK, after looking at your problem in a little more detail (im at work) i’ve found that you need to remove/add the following.

    remove div id=”page”

    remove div id=”content”

    add the following css to div id=”primary”

    max-width: 980px;
margin-left: auto;
margin-right: auto;

    add stuff to your footer, you’ll see it’s now working.

    EDIT: css to header tag

    top: 0px;

  4. How about:

    .site-footer {
  position: fixed;
  bottom: 0px;
}

    to see your footer you need content of course… or add a fixed width and height and a background-color

  5. I’ve just had this issue, or at least one similar, myself.
    I found that I had an extra closing div tag inside of my .wpwrap

    .wpfooter should be inside of .wpwrap in order to stick to it’s bottom (using pos: absolute & bottom 0 method)

    The extra closing tag caused .wpwrap and .wpfooter to be siblings, so .wpfooter was positioned absolutely to body.

    It’s worth just checking the html structure to see where .wpfooter is being rendered.

    I hope that makes sense and hopefully helps somebody! 🙂

  7. if you are looking for a quick way around it use this

    in your css add #footer { top: 100vh; position:relative; width: 100%;}

    in your html add <div id="footer"><p>Hey look I was forced to be at the bottom</p></div>

    I hope this helps but keep in mind that while designing a page the only thing that should never be set statically is the height!

    the best way to do it is by setting a min-height at the div content or if you feel lazy at the container or even to the body tag! usually I do this to the body tag min-height: 100vh and this will keep the footer always at the bottom without having to worry about future pages!

    happy coding