CODEWITHSUNDEEP
css
Aaron Moodie
Aaron Moodie

Reputation: 1965

CSS nested div height 100%

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%;
}

Upvotes: 6

Views: 8026

Answers (2)

Starx
Starx

Reputation: 79069

Solved:

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

Upvotes: 5

edl
edl

Reputation: 3214

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

and add overflow:hidden; to #border.

Upvotes: 1

Related Questions