Footer background should extend to bottom of browser

user_169277 0
Viewed 27336

I have a problem with fixing the footer to the bottom of the browser .. The problem is when resolution changes or windows resizes the footer content overlaps the content of the website, here is the current css for footer div

div.footer {
        position:absolute;
        bottom:0px;
    }

Does anybody knows how can I fix this? Thank you

UPDATE:

This is what I need exactly but for some reason it doesn't work for my web page, it does work when I cut paste code to the blank page, but since my page is full with content and everything, what are the important elements to include? Hereis the url.

The above trick works only if my website has filled content if I have some lets say few lines the above trick doesn't work.

UPDATE II

My website has dynamic content so I think can't use this sort of CSS Sticky footers because sometimes the website will just have few lines sometimes be packed with content. Thats why the footer is not sticking to the bottom of the webpage.. its not problem to stick the footer if there is plenty content on the website the problem is without.

css html
11 Answers

What you have here is a common problem for which there is no common answer, but what I would try if I were you since all these above suggestions apparently aren't working, I'd try to set my page container background to any color let say white (#FFFFFF) and I'd set background color of body to any other then white let say grey (#CCCCCC). And finaly set footer position to relative and of course it must be placed after everything if you want it alway to be at the bottom. This way you'll get what you need 100 % sure if you follow step by step instructions.

user_2221590

Checkout CSS Sticky Footer for an excellent cross-browser compatible method.

What that site essentially does is make the footer stick BENEATH the browser edge, and gives it a negative margin that has the same value as the footer's height. This way, the footer is sure to stick to the bottom.

user_2218530

You can add a push div to the last element before the footer in order to always assure that the footer doesn't overlap the content.

Given this example:

<html>
  <body>
    <div class="header" />
    <div class="content" />
    <div class="footer_push" />
    <div class="footer" />
  </body>
</html>

If <div class="footer" /> is always 75px high, use the following CSS:

html, body { height: 100%; } /* Take all available vertical space */

/* Push the bottom of the page 75px.
   This will not make scrollbars appear
   if the content fits already. */
.footer_push { height: 75px; }

/* Position the footer */
.footer { position: absolute; bottom: 0; height: 75px; }
Andrew_Moore_262100

Basically you need to give the footer a fixed height and to push the footer with another div of the same height to the bottom. There's however more browser specific stuff which you need to take into account:

  1. The html and body must besides having a height of 100% no (default) margin to avoid the footer being pushed further to below that amount of margin.
  2. The p and div elements throughout the page must have no margin-top to avoid the footer being pushed further to below that amount of top-margins in under each Firefox.
  3. The "container" div must use min-height of 100% instead of height to avoid the footer to overlap the remaining of the content. IE6 which doesn't know min-height just works fine with height, so you'll need to add a * html hack for this.

All with all, here's an SSCCE, just copy'n'paste'n'run it:

<!doctype html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
        <title>SO question 1900813</title>
        <style>
            html, body {
                margin: 0;
                height: 100%;
            }
            p, div {
                margin-top: 0; /* Fix margin collapsing behaviour in FF. Use padding-top if necessary. */
            }
            #container {
                position: relative;
                min-height: 100%;
            }
            * html #container {
                height: 100%; /* This is actually "min-height" for IE6 and older. */
            }
            #pushfooter {
                height: 50px; /* Must be the same as footer height. */
            }
            #footer {
                position: absolute;
                bottom: 0;
                height: 50px;
            }      
        </style>
    </head>
    <body>
        <div id="container">
            <p>Some content</p>
            <div id="pushfooter"></div>
            <div id="footer">Footer</div>
        </div>
    </body>
</html>

Edit: after more testing I realized that this indeed does not work in IE8 (I still consider it as a beta so I didn't really use/test it, sorry about that), unless you let it render in IE7 compatibility modus (insert sad smilie here) by adding the following meta tag to the <head> (which I already added to the SSCCE here above):

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

or to let it render in quirks mode by using a "wrong" doctype (either remove the <!doctype> or pick one of the doctypes associated with painfully red Q boxes in IE here). But I wouldn't do that, that has more negative side-effects as well.

And, surprisingly, the http://www.cssstickyfooter.com site as someone else here mentioned here which used an entirely different approach also did not work in IE8 here (try to resize browser window in y-axis, the footer won't move along it as opposed to other browsers, including IE6/7). That browser keeps astonishing me. Really.

user_1578820

Try setting the footers Position to relative and playing around with a negative top margin to get it how you want it.

user_1948320
user_971420

Depends on what you want to do. I you want it to be always visible on the bottom of your screen, you should use

div.footer{
    position: fixed;
    bottom: 0;
}

Be sure to get some padding on the bottom of your body (or container, so that people can actually scroll to the bottom of the text). The main problem here is that when resizing everything it will overlap.

If you just want to have a footer that has a background-image / colour that stretches all the way till the end (for pages that are not fullpage height) you could try to use a faux column principle or even try to give your body the background colour of your footer and fix the header / content background.

Today I stumbled across this page: http://www.xs4all.nl/~peterned/examples/csslayout1.html

Could be helpfull

user_2239870

try this:

#wpr{
    display: table;
    height:  100%;
    width:   100%;
}
.dsp-tr{
    display: table-row;
}
.dsp-tc{
    display: table-cell;
}
#ftr-cnr{
    text-align:     center;
    vertical-align: middle;
}
#ftr{
    background-color: red;
    padding:          10px 0px;
    font-size:        24px;
}


<div id="wpr">
  <div class="dsp-tr">
    <div class="dsp-tc">
      body
    </div>
  </div>
  <div class="dsp-tr">
    <div class="dsp-tc" id="ftr-cnr">
      <div id="ftr">
        footer
      </div>
    </div>
  </div>
</div>

display: table does not make it a table, a <div> is still a <div>, it just tells the browser to display it as table. i tested it in chrome and firefox let me know if it works for you.

user_2386470

We had this problem a few times. We could not find any cross browser CSS only solution. We finally resorted to JQuery. We wrote our own (i can't publish) but this one http://www.hardcode.nl/archives_139/article_244-jquery-sticky-footer.htm looks promising:

$(function(){
    positionFooter(); 
    function positionFooter(){
        if($(document.body).height() < $(window).height()){
            $("#pageFooterOuter").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#pageFooterOuter").height())+"px"})
        }   
    }

    $(window)
        .scroll(positionFooter)
        .resize(positionFooter)
});
user_1303040

Do you have a DOCTYPE declaration in the top of your HTML?

If so, there is a good chance I have a solution for you.

I was trying to do a height:100% table or div (assuming this is a basic cornerstone to the expanding footer feature)

No matter what I did, the 100% height didn't work! the elements just didn't stretch...

I narrowed it down to a very basic HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test1</title>
</head>
<body>
<div style="border: 2px solid red; height: 100%">Hello
World</div>
</body>
</html>

but the DIV didn't stretch all the way down (the 100% was ignored). This was true also for tables with plain height="100%" attribute.

As a desperate last result guess, I removed the DOCTYPE row, resulting in this code

<html>
<head>
<title>Test1</title>
</head>
<body>
<div style="border: 2px solid red; height: 100%">Hello
World</div>
</body>
</html>

And it worked!

I'm sure there is a good explanation, but I really didn't care since it solved the problem

Update

See related question (asked by me)

user_2391680

I came up with a fairly simple solution that doesn't use any CSS height hacks or any of that.

You just set your <body> with the background you want the footer to have, and then put everything besides the footer in a <div> with the properties you would normally give to the body tag.

This gets the footer to "extend" its color to the bottom of the page when there is short dynamic content without expanding it needlessly when there is a lot of dynamic content. The "virtual body" div can still have a gradient followed by a solid color, and the footer's background is hiding in the body tag, only showing up on short pages. (Works great if you need a solid color to continue after your footer gradient ends, or if you just need the background to match the footer color)

CSS

body    {background-color: #000; }
#primary_container { background: #FFF url('/images/bgvert.png'); background-repeat: repeat-x; }
#footer { background: #000; }

HTML

<body>
  <div id="primary_container">
    <!-- most content, can be short or long -->
  </div>
  <div id="footer">
    <!-- if primary content + footer is less than browser height, body background color
       displays below this. If it is more, you get normal scroll behavior to the end
       of footer and body background color is never seen -->
  </div>
</body>
user_8903080
Related