I have searched high and low for information on this topic, I have experimented again and again with very limited success. I wanted to share my findings in hopes that someday some poor soul will not have to go through the horror of trial and error.
My dilema even made it to the SXSW panel where Vertua partially tackled some of the issues people have with absolutely positioned layouts and gave a presentation on better CSS layout strategies.
The goal here is to create a 100% vertically stretching column with a background colour (not an image) that will stretch to 100% height regardless of the amount of content, (ie a single line of text, or 100’s of lines).
If you are pressed for time or are tired of wasting time researching this issue my conclusion thus far is that it certainly isn’t easily accomplished. Below outlines the best methods I have found thus far.
Courtesy of Position is Everything
Equal Height Columns
The basic method works like this:
1. Blocks which will act as columns must be wrapped in a container element
2. Apply overflow: hidden to the container element
3. Apply padding-bottom: $big_value  to the column blocks, where $big_value is a large enough value to guarantee that it’s equal to or larger than the tallest column
4. Apply margin-bottom: -$big_value to the column blocks
What happens is that columns really become as tall as the content they contain plus $big_value thanks to the padding-bottom. The negative margin-bottom brings the flow of the document back to where the same point as where the padding-bottom began, and the overflow: hidden on the containing element chops off the overflow. Consequently the columns’ presence on the page only appears to be the height of the containing element and any background colour (or image for that matter) applied to the columns displays for that height. Most crucially, the height of the page reflects what appears to be on the page and does not dissappear into the scrolling distance.
Remarkably, IE Win doesn’t actually need the overflow: hidden, but it causes no problems so there is no need to hide it.
Beware though, browsers don’t let you throw arbitrarily large values at them. They have limits. Exceed that limit and the columns will expand to the padding-bottom value and you’ll end up wiuth some pretty long pages. Fortunately, we know the number of that limit (which is actually provided by Safari which is the most conservative browser in this matter): 32767px.
<div id="block1">Block 1</div>
<div id="block2">Block 2</div>
Note: The above example is the very bare bones, please read the entire article to get browser specific code.
Even this method does not accomplish 100% height if the content doesn’t already stretch to more than your viewport. It does however work well for creating equal height columns and when the content does fill more than the viewport it does appear to be 100% stretching. IE: No more “cut off”.
Other things I have tried which gave me limited or no success:
1) A 100% height wrapper around an absolutely positioned 100% height column. This works only until the content runs outside the viewport. The column appears “cut off” and the content runs out over it.
2) Min-Height – I simply had zero luck with this
3) Wrapper with Overflow and Floated Columns – Again I get “cut off” after the viewport.
4) Every height, min-height, wrapper, no wrapper, float, position and even doc-type scenario I could think of.
There have been rumors of display:table; coming to the rescue in the future but as of now I have yet to find the perfect solution. This also means that unfortunately that some people may be forced to remain with tables for certain layout methods.
I really look forward to discussing this particular quirk (no pun intended) with readers.