I’m stumped on this one. I have a series of (very) old sites written in HTML3 and designed with a table layout. The layout consists of three rows – a header, content area, and footer. It’s set up like this:
The table has a height of 100%, as do the two cells in the middle row (where the page content is). If the content is taller than the window, it naturally pushes down the footer. But if the content is shorter than the browser window, the middle row expands to fill the remaining space, keeping the footer glued to the bottom of the window.
Here’s the problem. We’re trying to transition the sites to HTML4, but table height is deprecated. Thus, with the HTML4 doctype, "height: 100%;" on the table no longer works; if the content is shorter than the browser window, the footer moves up to where the content ends.
Is there any way to either (a) keep the table layout but get it to work with HTML4, or (b) redo the site in divs but still have the desired effect (make the footer stick to the bottom edge of the window when the content is shorter than the window height)?
Actually, table height attribute wasn’t deprectated. It was never an official attribute of table to start with. It was just one of many attriutes that some browsers supported even though it wasn’t in the spec.
As to your question though, Chris had an article on here a while back with a link to some sticky footer code. I don’t have Chris’s article handy but here’s the link to the sticky footer code:
This reply has been reported for inappropriate content.
Thanks. I’ve seen that sticky footer code before and it looks like it could work. Unfortunately, that would mean redoing the site in divs, which would be a much bigger undertaking (we have a whole bunch of sites based on this same table layout). So, I’m trying to fix this but keep the table layout, if possible (at least for the short term).
On the other hand, I’ve made some progress. Take a look at this:
This almost works. In Firefox, it actually comes out how I want it to – the table fills the height of the browser window, and the middle row expands while the header and footer keep a fixed height. In IE, the table is always 250px taller than the height of the window (I figured this out by placing an absolutely positioned box at the base of the scroll thumb and then adjusting its height until it touched the bottom of the page). I can’t figure out why this is.
Any ideas? The fact that it works this way in Firefox is encouraging…I’ll probably just have to mess around with IE until I stumble upon a solution.