Why is my footer not at the bottom of the page?

Question

I have a page like http://codepen.io/meek/pen/NNprYb My problem is that the footer is not staying at the bottom of the page, only at the bottom of the first section.

HTML for footer:

<footer class="row-footer">
    <div class="container">
        <div class="row">             
            text
        </div>
    </div>
</footer>

and CSS:

footer {
    width: 100%;
    bottom: 0;
    position: absolute;
    height: 50px;
  background-color: #ccc;
}

No matter what I try I can't get it to stay at the bottom. I'd like for it to be at the very end of the contact section.

clarification: I don't want it to be fixed, I just want it to be at the very bottom of the page.

Answer 1

Remove the height:100% from #content

Remove position:absolute from footer

Setting the height to 100% will only make it as tall as the windows/screen height. Removing it will make it "auto-expand".

Answer 2

Codepen Link

footer {
   width: 100%;
    bottom: 0;
    position: fixed;
    left: 0;
    height: 50px;
    background-color: #ccc;
}

OR

just do the following Wrap the entire html inside a div lets call it wrapper then

footer{
  position: fixed;
  top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
  height: 50px;
  background-color: #ccc;
}

This piece of code just calculates the top value of your footer div

Answer 3

Ok, using position: absolute; on footers is generally never a good idea since the footer no longer will move relative to the rest of the content on the site. I understand that you do not want to use position: fixed; since this will not give you the results you are looking for.

Your #content div currently has a constant height of 100% which will push the footer to somewhere in the middle of the content.

My solution would be to use a min-height: 100%; on the #content div and remove the position: absolute; (and bottom: 0; ) from the footer.

Result: The content-divs' height will adapt to be more than 100% if more content is added. It will always be at least 100% and therefore the footer will always be pushed to the bottom of the page, even if the content only fills half the window size.