CSS nested div height 100%

Question

I've currently got the #border div at 100% of the page height, but am trying to get the #container div to stretch to 100% inside #border. At the moment #container only stretches to fit the content 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

Solved:

#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; to #border.