I'm having some problems using Ryan Fait's Sticky Footer CSS hack. The footer does stick to the bottom of the page however I am left with some scrolling between the window footer and the page footer.

I've put the code in the as instructed but I can't see if I'm missing something?

13 answers

1
point
This was chosen as the best answer

I like using http://www.cssstickyfooter.com/ for a stick footer. Lots of Browsers supported too.

Answered over 7 years ago by Mike Brisk
7
points

If you are looking for a sticky footer for your page then create a div that wraps all of your content (ie a wrapper div):

<div id="wrapper">
Content Here
</div><!--//wrapper//-->

And then place your footer div below / outside your wrapper:

<div id="wrapper">
Content Here
</div><!--//wrapper//-->

<div id="footer">
footer info
</div><!--//footer//-->

Then define these in your CSS:

#wrapper{margin:0 auto -50px; min-height: 100%; position:relative; width:960px;}
#footer{clear:both; height:50px; margin:-50px auto 0; position:relative; width:960px;}

And now your footer should stick. Even in IE6. :D

Answered over 7 years ago by Mike Kivikoski
5
points

Hi Lee,

Are you trying to literally make it "stick" to the bottom of the browser page so that it scrolls with the page when scrolling vertically?

If so, here's the simple solution

#bottom_bar { width: 100%; height: 158px; position: fixed; bottom: 0; padding: 0;}

The position needs to be "fixed" in order to clamp it to the browser window - the width and height is actually up to you, but I would certainly recommend a width of 100%. Bottom: 0; simply means that the DIV will be 0 pixels from the bottom.

Hope that helps!

Answered over 7 years ago by Jake Holman
2
points

i'm also using css stickyfooter on my website and wordpress blog and it works great

its compatible with major browsers

Answered over 7 years ago by Vitor Neves
1
point

I use a technique similar to Mike Kivikoski's solution above, but with three divs instead of two; a container with 100% height for the content; a footer with a height of your choice (i.e. 100px) and negative top margin equal to this height (i.e. -100px), and a final div inside the container with a height equal to the height of the footer (i.e. 100px).

This first div gives us space for our content, using 100% of the browser window's height. The second div, via it's negative top margin equal to its height, will bring it up into view at the very bottom of the screen. The third div, thought not essential for the sticky footer effect, will prevent the content from disappearing behind the footer if the browser window's height is reduced to less than the height of the content.

Here is a basic HTML example:

<body>
    <div id="container">
        <p>Hello world.</p>
        <div id="clearance"></div>
    </div>
    <div id="sticky_footer">
        <p>Here is my sticky footer.</p>
    </div>
</body>

And here is the CSS:

html, body {
    height: 100%;
}
#container {
    min-height: 100%;
}
* html #container {
    height: 100%;
}
#clearance {
    height: 100px;
}
#sticky_footer {
    height: 100px;
    margin-top: -100px;
}

You may still get some scrolling, but this can be eliminated by adding some CSS to override the default values, which, at the very least, could look something like this:

html, body, div, p {
    margin: 0;
}
Answered over 7 years ago by Edward Williams
0
points

Jake,

I'll give that a blast. Thanks

Answered over 7 years ago by Lee Simpson
0
points

Which browsers do you need to support? Jake's solution won't work in IE5/6 as they don't support position: fixed and it can also be buggy in IE7.

Answered over 7 years ago by Alistair Holt
0
points

I haven't tried it yet, but I need to support IE7/IE8/FF/Safari

Answered over 7 years ago by Lee Simpson
0
points

True enough about IE6, fixed floating doesn't work at all - you would need to CSS Hack for IE6. It does, however, work fine in IE7 from when I've used it, you just need to make sure the rest of your Code is sounds, which it should be if you're Standards Strict.

Answered over 7 years ago by Jake Holman
0
points

Managed to get this working (not on the site but another site) using the Stick Footer solution.

The client doesn't need to support IE5 or 6 so I'm sure some of the solutions would have worked just as well.

Cheers everyone!

Answered over 7 years ago by Lee Simpson
0
points

Thanks for all the answers chaps. I'm going to get back to this at the weekend so I'll let you know how it goes.

Answered over 7 years ago by Lee Simpson
0
points

I have had the same issue before and found the best solution is to use the !important hack for IE6:

position: fixed !important; position: absolute;

That way IE6 will read the absolute and still position it correctly, it does do something slightly different on scrolling and overlays the content differently, but its the best solution I can remember.

Answered over 7 years ago by Alan M Sherwood
0
points

Take a look at this resource, it worked swimmingly for me (however, I haven't done extensive testing on linux after using). Doesn't sound like that's an issue for you anyway.

Answered over 7 years ago by Jeff Gray