Sent by Michael Landis on 3 December 2003 03:03
Hi, Ira,
There are several specification components involved with interpreting how
HTML and BODY work, so let me see how I can break this out...
1. What part of the document/browser does the HTML tag refer to?
This is mostly discussed in the specs at
http://www.w3.org/TR/REC-CSS2/visuren.html#containing-block .
In CSS, the HTML tag is considered the "initial containing block" -- it is
the root element for the document tree (that is, every other element is
inside of it). According to the specs, the default width of the initial
containing block is the width of the viewport. Browser makers have taken
this one step further, to mean that the HTML tag /represents/ the viewport.
This means that width: 100%, height: 100% will represent the entire
viewable area in a window. It also means that HTML is /always/ considered
the viewport by the browsers, regardless of the width or height defined by
the CSS.
The main purpose for defining html {height: 100%} is to allow vertical
percentages to work in non-fixed-sized child elements. If an element with a
percentage height is in a container with an auto height, the percentage
disappears and is replaced by auto.[1]
Regardless of the size of the viewport or HTML, the background for HTML
will always cover the entire viewport, regardless of where you are -- with
the exception of how BODY works. See question 3 below for more on this
one...
2. What does the BODY tag refer to?
The body tag is simply a block element. As you've noticed, borders only
wrap around the contained content.
3. Why does the BODY background impact the entire viewport, instead of just
the content area?
This was in response to how pre-CSS HTML defined backgrounds. The specs[2]
state that HTML documents have special rules for window backgrounds.
Basically, the background for the entire canvas (where the content appears)
is normally defined by the background for the initial containing block. In
non-CSS HTML, however, BGCOLOR was applied to the BODY tag. Therefore, it
works like this:
* If a background is defined on HTML but not on BODY, use that for the
canvas.
* If a background is defined on BODY but not on HTML, use the background
defined for BODY for the canvas.
* If a background is defined on both, then normal rules apply -- HTML (the
initial containing block) defines the canvas background, and BODY (as a
child block) simply defines the background on the document content area,
where the body block is defined. You can actually use this for some fun
effects, like placing a background image on HTML at the bottom, and a
background image on BODY at the top, and voila! Header/footer graphics!
Anyways, hopefully this helps answer some of your questions about why
HTML/BODY is the way it is.
MikeL
[1] http://www.w3.org/TR/REC-CSS2/visudet.html#the-height-property
[2] http://www.w3.org/TR/REC-CSS2/colors.html#q2
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/