CODEWITHSUNDEEP
htmlcss
tkbx
tkbx

Reputation: 16305

min-height: 100%?

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?

Upvotes: 0

Views: 196

Answers (3)

Michael Antonius
Michael Antonius

Reputation: 972

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...

Upvotes: 0

mToce
mToce

Reputation: 302

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

Upvotes: 1

Tepken Vannkorn
Tepken Vannkorn

Reputation: 9723

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.

Upvotes: 0

Related Questions