|  | Posted by bluparadox on 09/27/05 11:18 
Unfortunately height: 100%; probably wont do what he wants it to inanything but internet explorer because of how the standard is defined
 for content that is larger than the specified size.
 
 If the content takes more space than is aloted then the "overflow"
 property becomes important. The 4 allowed values are "hidden",
 "visible", "scroll", and "auto". "hidden" completely hides content that
 falls outside of the container, "visible" lets the content continue to
 go outside the container. "scroll" puts in scrollbars to allow all the
 content to be viewed in the container, and I beleive "auto" puts the
 scrollbars in only when neccessary.
 
 The important thing to notice is that according to the specification
 none of those properties resize the container to fit the content, which
 is what IE does when you specify height. The correct functionallity
 (that is implemented by firefox) is to just let the content go off the
 edge of the container (when overflow is "visible"), which which is what
 is happening here. The functionality he wants is probably more like the
 "min-height" property, but unfortunately IE doesnt support that, and
 plenty of other browsers do not either. I believe you can make it work
 with some css hacks, but it's sorta a pain.
 
 the hacked code would look something like this (havent really tried
 it):
 
 #mainbody
 {
 min-height: 100%
 }
 * html #mainbody
 {
 height: 100%;
 }
 
 Basically this sets the min-height to 100% for all browsers that
 support min-height, and for all versions of IE sets the height to 100%,
 which IE treats as min-height. The reason the second statement only
 affects only IE is the fact that IE is the only browser with an
 invisible wrapper element that encloses html (another non-compliant...
 feature). This wont work in all browsers, since browsers that do not
 support min-height but are not IE will have height set as auto still,
 but this is a reasonable default since the border should then expand
 fit the content, but unfortunately will not also expand to fill the
 screen if the content is smaller than the screen.
 
 Hopefully that at least gets you started in the right direction
  Navigation: [Reply to this message] |