0

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.

HartleySan
  • 7,404
  • 14
  • 66
  • 119
  • IE6 represents a fraction of a percent of all the browsers in use. Why do you still care about IE6? – Craig Tullis Sep 28 '15 at 01:20
  • This does nothing to answer the question, but for the sake of argument, let's take IE6 out of the equation. Now, how would you do it? Thank you. – HartleySan Sep 28 '15 at 02:04
  • If I meant for it to be an answer, I wouldn't have put it in a comment. :-) I'd use modern HTML5, or at worst I would use DIV's with semantic id values (**not** CSS classes), move on to a better future, support only as far backward as I absolutely have to, and I would tolerate my assumptions being questioned both by others and, I would hope, by myself. Peace. :-) – Craig Tullis Sep 28 '15 at 02:45
  • Actually, I'd just do this: http://stackoverflow.com/questions/20085137/my-footer-floats/20114486#20114486 – Craig Tullis Sep 28 '15 at 03:31
  • Craig, I appreciate your comments and the linked answer, but you seem to think that I'm making assumptions when I'm purely asking a question. (While it may seem like sacrilege to you) there are businesses in this world that (sadly) still rely on IE6 to run things. You can make fun of this all you want, but the decision for certain businesses to do so goes well beyond both your and my pay grades, so I'd appreciate it if you'd cool it a bit with the smart-arse attitude. I was simply asking a question, and if the answer is literally, "No, it's not possible," then just say so. Also... – HartleySan Sep 28 '15 at 03:54
  • I get what you're getting at with your linked answer, but that is not the desired layout in this case, and like I said to InfiniteLoop below, a fixed-height footer is something I would like to avoid if possible. I can easily code a solution with a fixed-height footer, but I was curious if it was possible without one, thus the original question. Between your "answers" and InfiniteLoop's answer though (and the fact that no one else has answered and the fact that I have already Googled this a lot), I get the feeling that the layout I want is indeed impossible to achieve. Thanks anyway. – HartleySan Sep 28 '15 at 03:57
  • I'm definitely not making fun of the fact that businesses still rely on IE6 to run their corporate Intranet apps. Although having to do that is a tragedy on very many levels. For one thing, IE6 is a security **nightmare**. It's a wretched thing, and any business who is still using it is literally *begging* to be breached. For another, you can't even run IE6 on a remotely modern version of Windows, which means those businesses are also running versions of Windows that are a security nightmare. It's time for them to fix those apps and move on. Nothing funny about it... – Craig Tullis Sep 28 '15 at 15:37
  • The ref'd answer's just an example of an approach to layout. I just haven't had the time to formulate a real answer. Also, the only assumption I presumed you were making was that you have no choice other than to support IE6. It may well be that you have no choice. But that still means you're building something that prolongs the departure from IE6 and which won't work as well as it should with modern standards. IE6 is an unholy mess. it doesn't even use the same box model as any modern browser, which means you basically need a complete alternative stylesheet just for it. Good luck! (sincerely) – Craig Tullis Sep 28 '15 at 15:41

3 Answers3

1

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.

Craig Tullis
  • 9,939
  • 2
  • 21
  • 21
  • Thank you very much for this answer and your latest comments. Your original comments left be a bit perturbed, but after further explanation, I see what you mean. Thank you. If you would be so kind then, is what I'm asking for possible back to at least IE8? In other words, is a dynamic-height sticky footer possible in FF, Chrome and IE back to 8 without JS? Thank you. – HartleySan Sep 28 '15 at 20:20
  • @HartleySan I just haven't had the time to really poke at this much. I'm not too sure it's possible using CSS exclusively. If it were me, I'd be reaching for JavaScript (and using jQuery to normalize the event handler code between browsers). Further, I'd detect when JavaScript is disabled, and make the footer non-stick in that case, and maybe display a discreet warning message along the bottom of the header (somewhere, anyway) explaining that the experience will be compromised unless JavaScript is enabled. Sorry I don't have a better answer--sincerely wish I did. It *might* be possible, dunno. – Craig Tullis Sep 29 '15 at 23:42
  • After playing around with this for a few days myself, I'm starting to conclude the same thing. It's a darn shame that seemingly simple and common layouts are anything but simple and intuitive to create with CSS alone, but I suppose that's the nature of browserland. I really feel like CSS is always the weakest link in trying to do anything in the browser. When are we going to get a real styling/layout language around here?! Anyway, thanks a lot. I do appreciate your help and insight. – HartleySan Sep 30 '15 at 00:59
0

Here's what you need to add to your css:

html,body{width:100%;} //This makes sure the body takes up 100% of the window
.wrapper{min-height:100%; margin-bottom:-/*height of footer*/px;}
.push{height:/*height of footer*/px;}
.footer{height:/*height of footer*/px;}

Wrap all of the green section in a div with class="wrapper"and add <div class="push"></div> at the bottom to prevent your green area from overflowing into the purple area (because of the negative margin).

InfiniteLoop
  • 23
  • 3
  • This doesn't answer my question because I need a footer with dynamic height. Please read the question again. Thank you. – HartleySan Sep 28 '15 at 02:05
  • Does it change height at set intervals for mobile compatibility (i.e. `@media (min-height:y){}`) or something entirely different? If it is the former, you can use `@media` to specify at which intervals the heights change. – InfiniteLoop Sep 28 '15 at 02:18
  • Honestly, it doesn't really matter, as the question is asking about dynamic heights. For instance, there could be any number of things in a footer that could cause it to take up a different number of vertical pixels across browsers by the simple fact that not all browsers render the same thing exactly the same. As such, by restricting the footer to a set height, you're greatly limiting the flexibility of it. Furthermore, in most normal cases, you would never explicitly set the height of a footer, so why would you want to here? – HartleySan Sep 28 '15 at 02:41
0

It is possible with old school HTML table layout. The following code should work in IE6.

html, body, table { height: 100%; }
table { width: 100%; }
td { vertical-align: top; }
.header { background-color: orange; }
.main {
  background-color: green;
  height: 100%;
}
.footer { background-color: purple; }
<table>
  <tr>
    <td class="header">1</td>
  </tr>
  <tr>
    <td class="main">2</td>
  </tr>
  <tr>
    <td class="footer">3</td>
  </tr>
</table>

For newer browsers you can do the same with CSS tables.

html, body, .table { height: 100%; }
.table {
  display: table;
  width: 100%
}
.row { display: table-row; }
.cell {
  display: table-cell;
  vertical-align: top;
}
.header { background-color: orange; }
.main {
  background-color: green;
  height:100%;
}
.footer { background-color: purple; }
<div class="table">
  <div class="row">
    <div class="cell header">1</div>
  </div>
  <div class="row">
    <div class="cell main">2</div>
  </div>
  <div class="row">
    <div class="cell footer">3</div>
  </div>
</div>
tomasz86
  • 889
  • 10
  • 9