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.

As far as I can tell the code works fine. http://jsfiddle.net/xeggwa4q/. There may be some other CSS that is overriding what you have provided here. — EternalHour, Oct 06 '14 at 03:25
@EternalHour the code you posted is working for me as well, but this is what is not working: http://jsfiddle.net/xeggwa4q/1/ the footer should be extended to the very bottom of the page, but you can see it is in the middle. — user3552115, Oct 06 '14 at 03:40
@EternalHour my apologies I messed that last one up, http://jsfiddle.net/xeggwa4q/2/ this is fixed but as you can see the problem still exists. — user3552115, Oct 06 '14 at 03:43
It must be due to your screen size or browser, it still looks fine to me. — EternalHour, Oct 06 '14 at 03:45
@EternalHour even if you make the window size in the demo really small? You should be able to see that the footer moves with the bottom of the window and when the window needs a scroll bar the footer will still be at the bottom of the window as opposed to the bottom of the scrollable page. — user3552115, Oct 06 '14 at 03:48

score 0 · Answer 1 · answered Oct 06 '14 at 03:20

0

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.

answered Oct 06 '14 at 03:20

JimmyRare

3,958
2
20
23

I am aware of this and know how to fix that, but my real problem is that the .everything container's height is only that of the browser window as opposed to the height of the entire page (height including that of which is scrollable if that makes sense) – user3552115 Oct 06 '14 at 03:27
Yes. The height property is relative to it's parent, in this case the body. And the body to the html doc. The html doc is relative to the viewport, thus your container is as high as the viewport. – JimmyRare Oct 06 '14 at 03:30
Ah thank-you. I was searching for a way to make the parent extend to the size of the page instead of the viewport and your comment gave me the idea of looking how to extend the parent to the size of the child so I added overflow: auto; to the everything div. It's working now. – user3552115 Oct 06 '14 at 03:55

score 0 · Answer 2 · edited Jul 27 '20 at 08:05

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

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

2 Answers2