Sticky footer pushed slightly out of the viewport in Chrome

Hi there,

I recently noticed the sticky footer-technique I have been using, which was always very consistent cross-browser, is acting up in Chrome.

Upon loading the page the footer will not be fully shown, basically it is pushed slightly out of the viewport, I would estimate some 15 px.

If one switches to another tab and back it will be ok however. Same thing goes for resizing the page.

Things are very much fine in Firefox, IE, Opera and Safari (windows), it’s just Chrome. I don’t remember seeing this Chrome-quirk before, so it must have been a recent update that causes this (I am on Windows 7, by the way).

I first thought it was me, did some searching online and noticed the same applies to sticky footers which use a similar technique (like: http://ryanfait.com/sticky-footer/) and also the one by the guru himself: Paul O’B ([URL=“http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm”]http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm). And here’s one of my own projects it happens on too: [URL=“http://www.kraanschip-challenge.nl/”]http://www.kraanschip-challenge.nl/.

Anybody have any ideas how to best solve this?

Hm, those all look fine in Chrome for Mac. I checked the PC in Win7, and they are working fine in the latest version of Chrome, too. :-/

Seems to just be you. It’s not happening for me either.

Though I’ddiscount Ryan Faits sticky footer as a good technique :).

I had checked it on various computers, however I just noticed the norton toolbar was switched on. No biggie usually, since in Firefox it then only shows a little less of the viewport. So I removed the toolbar from view in Chrome and then it did show the full footer! Apparently Chrome pushes the contents of the viewport down a little if a toolbar is active. Odd, but good to know. All is fine then. Sorry about this guys (and girls).

@RyanReese: what is wrong with his technique then, the extra ‘push’ div?

He uses this “hack”.

[COLOR=#000000].wrapper {[/COLOR]
[B]	min-height: 100%;	height: auto !important;	height: 100%;[/B]	margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */}

The Ryan Fait footer is broken in many browsers and I would avoid using it at all. It doesn’t work properly in IE7, 8 and opera.