How can I get my centered div have 100% height to encapsulate all of the content? I've tried several modifications but they're produce slightly different results in different browsers. Right now, it'll expand the background color of the center div to just the height of the browser window instead of matching the content?

html, body {
background: #111;
text-align: center;
margin:0;
padding:0;
height: 100%;
overflow: auto;
}
div#center {
position: relative;
width: 1024px;
margin: 0 auto;
background: #000;
height: 100%;
}

2 answers

Paul 0
0
points

If you'd like the div to expand based on size of content do not specify height:100% for your div#center.

If you need the div to be a specific size and expand to content try using min-height and max-height.

Hope this helps.

Answered over 6 years ago by Paul
Jordan 469
0
points

Try this:

html {height: 100%;}
    body { 
    background: #333; 
    height:100%; /* this is the key! */ 
    margin: 0 auto; 
    width: 852px; 
    }

    #container { 
    height:100%; 
    background: #999; 
    } 
Answered over 6 years ago by Jordan
  • He already assigned height to body and html in his code... Paul over 6 years ago