UPDATE: http://jsfiddle.net/dSkJb/19/
To clarify, the footer should be at the bottom of the page, and the page should have 100% height at all times, so the middle row should adjust accordingly. Nothing should overlap the footer, and the footer shouldn't overlap anything. Essentially, if you have a two row table with a 100% height, you'd accomplish this easily.
This is the issue, a div with 100% height that is inside a div with 100% and some text gets bumped down.
http://jsfiddle.net/sandraqu/dSkJb/8/
Is there a way to make the inner div's height relative to its containing div's height?
Original Post Below
I am trying to get two inner columns to have a 100% height, and not disturb the sticky footer. So far I have the sticky footer working in relation to a main container, but am struggling to match the height of #content, #col1, and #col2 to the height of the #container without loosing the sticky footer.
Different articles suggest using height: auto; height: 100%; and min-height (for ie6), but I find height: auto; to interfere with inner div heights. There are suggestions also for position: relative, floats, display: inline. Too many options?
Suggestions please :: http://jsfiddle.net/sandraqu/kDCTR/
Cross Browser Solution for IE 8+. In theory though, you could use any method for getting the columns in the middle. I just used display: table; and display: table-cell;. But the wrapping div does not need to be display: table; to work, so you can use float tricks, or faux columns, or holy grail, or whatever you want and make it IE 6+ compatible. I'm just to lazy to implement any of those right now. The main goal has been accomplished, I'll let you work on the specifics. :)