- From: Simon Hill <red_one@othersdietrying.com>
- Date: 01 Mar 2002 21:42:36 +1100
- To: Bert Bos <bert@w3.org>
- Cc: www-style@w3.org
- Message-Id: <1014979363.1138.12.camel@whistler>
-------------------------------
10.6.3 Block-level, non-replaced elements in normal flow, and floating,
non-replaced elements
If 'top', 'bottom', 'margin-top', or 'margin-bottom' are 'auto', their
computed value is 0. If 'height' is 'auto', the height depends on
whether the element has any block-level children. If it only has
inline-level children, the height is from the top of the topmost line
box to the bottom of the bottommost line box. If it has block-level
children, it is the distance from the top border-edge of the topmost
block-level child box, to the bottom border-edge of the bottommost
block-level child box. Only children in the normal flow are taken into
account (i.e., floating boxes and absolutely positioned boxes are
ignored, and relatively positioned boxes are considered without their
offset). Note that the child box may be an anonymous box.
-------------------------------
"If it only has inline-level children, the height is from the top of the
topmost line box to the bottom of the bottommost line box."
Does this mean that no matter what, the height of the <div> below is
the same as the content-height? That is, one line?
Ergo, height: 100% is just the height of the line, irrespective of the
parents' styles? Or am I missing something obvious?
red_one
On Fri, 2002-03-01 at 20:24, Bert Bos wrote:
> James Aylard writes:
> > Some discussion and testing on the CSS-Discuss list [1] has
> > raised a question about how IE 5.x on the Macintosh renders 100% heights
> > under the following conditions:
> >
> > * The style sheet specifies 100% height for the html and body elements
> > * A div is placed within the html document, whose height is also set to
> > 100%
> > * In order to better see the div and to understand what is happening, a
> > fixed width (say, 200px) is applied, as is a background color (say,
> > #cccccc)
> >
> > For example:
> >
> > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> > "http://www.w3.org/TR/html4/loose.dtd">
> > <html>
> > <head>
> > <title>Div with 100% Height</title>
> > <style type="text/css">
> > html, body {
> > height: 100% ;
> > }
> > div {
> > height: 100% ;
> > width: 200px ;
> > background-color: #cccccc ;
> > }
> > </style>
> > </head>
> > <body>
> > <div>This should have a height of 100%</div>
> > </body>
> > </html>
> >
> > In most browsers on which this was tested (at least IE 6/Win32,
> > Mozilla 0.9.8, and Netscape 6.2.1), the div remains at a fixed height of
> > 100% of the viewport (with some space for the body element's default
> > margin/padding). In IE 5/5.1 for the Macintosh, on the other hand, the
> > height of the div is precisely proportional (to the exact pixel) to the
> > _width_ of the viewport. As the browser window is resized horizontally,
> > the div's height grows or shrinks accordingly.
> > I am unaware of anything in the CSS 2 spec that would dictate
> > this behavior, and am tempted to think it a bug. Can anyone --
> > especially someone from the IE 5/Mac team -- explain this behavior?
>
> I think both behaviours are incorrect. Without putting 'position:
> fixed' on at least one of the three elements, the '100%' won't refer
> to the viewport's height. In fact, there is currently nothing for it
> to refer to and it should just be interpreted as 'auto'.
>
>
> Bert
> --
> Bert Bos ( W 3 C ) http://www.w3.org/
> http://www.w3.org/people/bos/ W3C/INRIA
> bert@w3.org 2004 Rt des Lucioles / BP 93
> +33 (0)4 92 38 76 92 06902 Sophia Antipolis Cedex, France
>
>
Received on Friday, 1 March 2002 15:19:33 UTC