CSS nested tree height 100%

Question

I currently have a #border div at 100% of the page height, but I'm trying to get the #container div to stretch to 100% inside the #border. At the moment, #container is only stretched to match the contents inside it.

* { margin: 0; } html, body { height:100%; font-family: Georgia, Times, "Times New Roman", serif; font-size:13px; line-height:19px; color:#333333; background: #f5f1ec; text-align: left; } #border { background: #f5f1ec; border:solid 1px #FFFFFF; width: 880px; margin: 40px auto 0; padding:10px; height: auto !important; min-height: 100%; height: 100%; } #container { background: #FFFFFF; padding: 10px 50px 0; height: 100%; } 

Answer 1

It is decided:

 #container { background: #FFFFFF; padding: 10px 50px 0; height: 100%; width:780px; position:absolute; } 

Answer 2

Try #container{min-height:inherit;position:absolute;}

and add overflow:hidden; in #border.