Nested divs with 100% height

After long search I finally found a solution for a web problem which haunted me for a while. It was the fact that divs will not increase their size with the content which is stored in a nested div inside. For example:

<div id="container">
    <div id="content">
        Your text goes here.
    </div>
</div>

If you assign a background color to container, you’ll see the color is not filling the whole page or something similar. One of the problems is the 100% size some people give to divs: #content: 100%. I mean 100% of what? You need to define the size for the html and body tag too.

Some have recommended to create a
tag, but this not really a fine way to go. It’s better to make the content div to display as a table and enable an hidden overflow.

But code says more than thousand words:

html, body {
    height:100%;
}

#container {
    height:100%;
    overflow: hidden;
    display: table;
}

I have not tested it on all browsers but given the fact that all the attributes a pretty old it should work. If you find a constellation were this is not the case, please leave a comment.