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;
height: 100%;
overflow: auto;
div#center {
position: relative;
width: 1024px;
margin: 0 auto;
background: #000;
height: 100%;

2 answers

Paul 0

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 about 9 years ago by Paul
Jordan 469

Try this:

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

    #container { 
    background: #999; 
Answered about 9 years ago by Jordan
  • He already assigned height to body and html in his code... Paul about 9 years ago