Creating 100% height css divs

What is the best practice

[mack]

Over the course of my past couple of projects I feel as if I have been using hacks as opposed to correct solutions to obtain 100% height cols within containers.

For example when creating a 2 col layout I was guilty of using an illusion to make the left navigation appear to come right down to the page footer. By using using my chosen background color as the background for the entire wrapper. then specifying white for the content background. It did work but i'm sure there has to be a more elegant way of achieving this.

When creating a three col layout I think I went one stage worse by placing my content, left and right navigation within a container and used a tiled image to make the page appear to have 3 separate colors. (left, center an right)

The simple solution would be to use a <table></table> but I am keen to hear how others have solved this problem

Mack.

[swa66]

If your container has a specified height, explicitly set and not equal to auto, adding "height: 100%" on the children is all you need.

Problem with most of these is that many do not want to loose a height that's dependent on the content, and such features are ruled out in CSS as they are considered too time consuming to render by the browser crafters (who focus on speed, not on our comfort).

Setting the display to table-* would be an alternative, but well browser support is still too low (thanks to IE as usual)

Another way is to give the parent position (e.g. by giving it position:relative) and then absolutely position the children in it using top:0 and bottom:0. But again some legacy IE versions will be uncooperative and will need javascript to work around their failures.

So the faux background trick and letting the height be automatic and clearing the parent as/if needed is the easiest solution that doesn't pollute the html.

Check also on flexi-floats by suzyuk.
Since the old references you could find out here point to her profile, but that the current link there is different. It's all pretty hard to find, so from my bookmarks: [ago.tanfa.co.uk...] [hoping it'll stay the same]