min-height: 100%? - html

Question

I'm making a CSS layout that has a 960px wide div, and I'd like to have it reach from the top of the page to the bottom. The obvious solution is min-height: 100%;, but it doesn't work. Here's my CSS:
* {
margin: 0px;
padding: 0px;
}
body {
background: #FF0000;
height: 100%;
}
html {
height: 100%;
}
#sheet {
width: 960px;
min-height: 100%;
background: #000000;
margin: 0px auto 0px auto;
}
#sheet1 {
width: 760px;
min-height: 100%;
top: 0px;
bottom: 0px;
background: #FFFFFF;
}
And from my HTML:
<div id="sheet">
<div id="sheet1">
</div>
</div>
It display fine when I change #sheet's min-height to height, but then it would get cut off if the content took up more than a page. Is there a solution for this?

Answer 1

Try changing #sheet to height:100%, not min-height 100%, and add some content inside of #sheet-1.

Answer 2

Using 100% only takes effect only if there is HTML Element (text, image, or other elements) exist in it. Its height will be higher or shorter according to the length of the element. Thus min-height is used to specify only the exact number of length or height of the element. Try using pixels instead of percentage.

Answer 3

because you don't add any float or clear property ...
CSS will ignoring min-height and max-height, if the height property not defined,
Except if you add display:inline-block, but it can break your margin:0px auto; and i decide you to do like this:
* {
margin: 0px;
padding: 0px;
}
body {
background: #FF0000;
height: 100%;
text-align:center;
}
body * {
text-align:left;
}
html {
height: 100%;
}
#sheet {
width: 960px;
display:inline-block; // It can make height auto
min-height: 100%;
background: #000000;
margin: 0px auto 0px auto;
text-align:center;
}
#sheet1 {
width: 760px;
display:inline-block;
min-height: 100%;
background: #FFFFFF;
text-align:left;
}
Replace your css, with my code and i think it should work...