Footer of a web page not extending to very bottom of page

Question

My problem is that I have a web page with a footer. I would like the page to extend the footer to the bottom of the browser window if there is not enough content to fill the entire page. I would also like the footer to go to the very bottom of the page when the content exceeds the height of the browser and there is a vertical scroll bar.

For some reason I cannot get this to work, I followed the tutorial on this page: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

and the tutorial specifically says it does what I want- "On long pages with lots of content the footer is pushed off the visible page to the very bottom. Just like a normal website, it will come into view when you scroll all the way down. This means that the footer isn't always taking up precious reading space."

When I follow the tutorial it successfully puts the footer on the bottom of the page when there is not enough content to fill the page, but when there is more than enough content the footer is prematurely placed where the browser window initially ends because the body's and the everything container's heights are set to the height of the window as opposed to the height of the entire page (height of page with with scrolling).

the div organization is as follows:

<div class="everything">
    <div class="main_content"></div>
    <div class="template_footer"></div>
</div>

My CSS code:

   html, body {
       margin:0;
       padding:0;
       height:100%;
   }
   .everything{ //main container
       width:100%;
       min-width:960px;
       max-width:1450px;
       margin-left:auto;
       margin-right:auto;
       min-height:100%;
       position:relative;
    }
    .main_content{  //body container
        width:100%;
        position:relative;
        float:left;
    }
    .template_footer{
        width:100%;
        height:44px;
        background-color:rgba(0, 0, 0, .5);
        position:absolute;
        bottom:0;
    }

I've also tried a bunch of different variations with height and nothing works correctly, I've searched through other questions and they don't seem to answer this problem specifically.

Answer 1

The footer is absolute positioned to the bottom of the .everything container. So no matter the content, the footer will be covering the bottom 44 pixels of your container.

Answer 2

html {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  min-height: 100%;
  position: relative;
}

.main {
  padding-bottom: 60px;
}

.footer {
  position: absolute;
  text-align: center;
  bottom: 0;
  width: 100%;
  height: 60px;
}

the main section padding-bottom should be bigger than the height of the footer. The footer section has to be position absolute. The whole page should be min-height 100%.