[thelist] making a div stretch to the bottom

shawn allen shawn at alterior.net
Fri Nov 15 17:11:01 CST 2002


quoth Rob Smith:
> div {
> 	background-color: #999999;
> 	clip:     rect(   );
> 	height: 100%;
> 	border-style: dashed;
> 	border-top-width: 1px;
> 	border-right-width: 1px;
> 	border-bottom-width: 1px;
> 	border-left-width: 1px
> }
>
> This css results in a neat large gray dashed box that occupies all of
> the screen...with a slight white space margin around it.

Sorry to break it to ya, but percentage heights are only /supposed/ to
work within containing blocks that have an explicit height. It may work
in IE/win, but it should not in more compliant UA's (Mozilla, IE/mac,
Opera). From
<http://www.w3.org/TR/REC-CSS2/visudet.html#the-height-property>:

"<percentage>
Specifies a percentage height. The percentage is calculated with respect
to the height of the generated box's containing block. If the height of
the containing block is not specified explicitly (i.e., it depends on
content height), the value is interpreted like 'auto'."

That said, you can only make a box stretch to fill the entire height of
the browser window by explicity setting the height of its parent. Some
simple DOM javascript could probably do the trick for setting the height
of the body element if you want a more scalable solution.

Also, your border widths could be much more simply worded as:

border: 1px dashed;

hth,
--
shawn allen
  mailto://shawn@alterior.net
  phone://415.577.3961
  http://alterior.net
  aim://shawnpallen




More information about the thelist mailing list