Wordpress Unite Theme: Footer isn't sticking [closed]

Question

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!

Answer 1

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