Search code examples
htmlcssdynamichtml-tablesticky-footer

Site layout with dynamic sticky footer that works back to IE6 with no JS: Is it possible?


The requirement is simple: Create a site layout that has a dynamic sticky footer (i.e., a footer of dynamic height that sticks to the bottom of the viewport when the content doesn't fill up the entirety of the viewport, but that is under the content and not immediately visible when the content extends beyond the height of the viewport) that works in browsers back to IE6 and doesn't require JS hacks to work.
Is this possible?

I honestly don't mind if I have to use a table for layout purposes, but what I am looking for is the layout below that works back to IE6, but also of course works in all modern browsers. In the pictures below, orange is the header, green, the content and purple the footer.

Sticky footer layout diagram

I've tried any number of layouts with divs and tables, but I can't think of any that get this to work in old IE, Firefox, etc. Any help would be greatly appreciated.
Thank you.


Solution

  • A dynamically-sized sticky footer is tough, because you also then need to dynamically size the main content view so that scrolling works correctly, but CSS is not a dynamic programming language.

    The closest I think you're going to be able to get even with current CSS ("current" of course completely rules out IE6) is to use percentages. The problem with percentages is that the footer won't be dynamically sized to the content of the footer, it'll be sized to your best guess as to the percentage value to use. It won't be satisfactory.

    You said you want to avoid JavaScript "hacks," but nevertheless you could almost certainly pull this off with JavaScript, setting the footer to be absolutely positioned, with the bottom position nailed to 0 (zero), and write an event handler which detects changes in the height of the footer and resizes the main content window appropriately.

    I don't know that I'd call that a "hack" in a pejorative sense. It's just code, doing what you tell it to do. Of course, if corporate (or other) policy where you're trying to implement this won't permit the use of JavaScript, that's another matter. And given what a security travesty 14 year old IE6 is at this stage of the game, I'd actually be one of the ones in favor of disabling JavaScript. But that, of course, rules out being able to deploy any remotely modern facsimile of an "app." By modern, of course, I simply mean the types of user-friendly feedback that I was designing into thick client apps over 20 years ago, and which have only become truly possible in web browsers since the "Web 2.0" web-standards days. IE6, of course, predates even that.

    Providing full support for IE6 can be a tall order.

    Are you sure you can't specify that your app needs to run on a modern browser? The very latest versions of Chrome and Firefox can still be installed on Windows XP, and anybody who doesn't believe new versions of Chrome or Firefox are vastly more secure than ancient, bug-riddled IE6 is fooling themselves. Having said that; if you're still running Windows XP, you have very serious security problems just waiting to bite you.