1

I have been all over in regards of trying to troubleshoot why my footer is not staying at the bottom of the page, below all the content.

My theme is Unite. It's not online, so I cannot provide a link.

This one made the most sense, but it did not work plugging this into "colophon", since that was the footer ID.

http://matthewjamestaylor.com/blog/bottom-footer-demo.htm

I can provide the CSS:

 #colophon {

position: absolute;
    bottom: 0;
    width: 100%;
    height: 75px;
    /*padding: 10px 0;*/
    margin-top: 5px;
    left: 0;
    background-color: #303b23;
}

.footer-nav.nav > li > a:hover {
  background-color: transparent;
}

@media (max-width: 767px) {

    .site-info, .copyright {
      text-align: center;
    }
    .footer-nav.nav, .copyright {
        float: none;

    }
    .carousel-caption {
        display: none;
    }
}

/* Clearing */
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
    content: '';
    display: table;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
    clear: both;
}

I've been at this for a couple weeks now, on and off, and am having no success. Is anyone able to assist?

If I need to add more information to help resolve this, please let me know.

Thank you so much!

closed as off-topic by cjbj, fuxia Sep 11 '16 at 13:38

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

0

I'm assuming that #colophon is the element id of your footer wrapper? It's kind of an odd name for a footer wrapper, but if that is what it is then ok.

position: absolute; is with respect to the containing element, not the viewport.

As a quick fix try adding this to your css:

html, body {
    height: 100%;
}

If that doesn't work then there are ancestral elements in the footer's chain that are not at height 100%. Would need to have the page in a DOM inspector (e.g. FireBug) to really see what's going on...

  • I applied the body/html height, and it didn't quite work, however, it did cause it to drop down a bit with the empty space below the footer. I'll try firebug, and add to what you posted if I figure it out. Thank you! :) – MJV Sep 8 '16 at 15:00
  • Oddly, taking out bottom: 0; made it stay at the bottom of the content. Now the issue is when I zoom out, everything begins to rise. Is that preventable? – MJV Sep 8 '16 at 15:18
  • This actually was the answer- I took bottom: 0; out as well, and it started adhering to the bottom like it should. The reason it lifts is because it finished loading all of the page contents, and when I hit 50% on the zoom level it jumps up with the content. I don't think I can control that. Thank you C C! – MJV Sep 8 '16 at 16:40

Not the answer you're looking for? Browse other questions tagged or ask your own question.