Does the scroll bar belong to <html> or <body>?
I've been writing for every html file,but don't know exactly what it is.
views:
251answers:
4
+10
A:
<html> has no visual. It just defines that the document is a html document and it contains the head and the body.
It's the body that has the view.
The scroll bar belongs to the window if you talk about DOM.
But in CSS, you set scrollbar styles through <body>
If you use Firebug on Firefox and use the element inspector (the one where you can move your mouse and point around elements of the HTML document, and you point it at blank space where there's no elements there, it points to the <body>.
thephpdeveloper
2009-09-10 07:58:03
+1 Nice explanation.
Guru
2009-09-10 08:22:09
thank you very much Guru
thephpdeveloper
2009-09-10 09:25:40
It is important to notice that if you don't set any css style definition for the html tag, the style for body will fill to the page extent.
awe
2009-09-10 08:40:55
The background for body will fill the canvas, yes — that is a special case. The dimensions and styles other than background do not extend outside the document content block, except for in IE Quirks Mode.
bobince
2009-09-11 01:01:23
+1
A:
As for css definitions, the standards states that you can not define any styles on the html tag (as the html tag itself does not represent the view, it is the body, as Mauris said). But many browsers support setting style on the html anyway.
Example
This shows the page background as red, with the body as a <div> like green box:
<html style="background-color:red;overflow:scroll;">
<head>
<title>Page</title>
</head>
<body style="margin:10px;background-color:green;overflow:scroll;">
Page content
</body>
</html>
If you remove the style definition on the html tag, the background color and scrollbar on body is filled for entire page. The margin is only applied for content inside the body.
<html>
<head>
<title>Page</title>
</head>
<body style="margin:10px;background-color:green;overflow:scroll;">
Page content
</body>
</html>
awe
2009-09-10 08:22:03
This is very similar to the answer given by **Ionut G. Stan*, but it is important to notice that if you don't set any css style definition for the `html` tag, the style for `body` will fill the page.
awe
2009-09-10 08:35:13
A:
The root element (<html>) is, according to CSS 2.1, a rendered block element like any other. It does not represent the viewport, so according to the standard it is not the element that gives the viewport its scrollbar — in fact the scroll bar does not belong to any element.
If anything represents the viewport, it is the concept of the ‘initial containing block’, however this is ‘a level up’ from the root element and can't be addresses by CSS or the DOM.
However, there are a few special cases that confuse the matter. In particular, Ionut's tests give those results because of the special behaviour specified in section 14.2:
The background of the root element becomes the background of the canvas and covers the entire canvas
That is, the root element's background spills out of its actual dimensions to fill the whole viewport and document. Secondly:
For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element
That is, although the <body> element very definitely does not represent the viewport, its background can spill out of its dimensions in the same way. This is only present as a backwards compatibility measure, as authors had grown used to specifying backgrounds on the <body> element.
So you can't use background-color to tell where the root element's dimensions or the body element's dimensions lie. A better approach is to set document.documentElement.style.border= 'dotted red 1px'. This demonstrates that the root <html> element has the dimensions of the document, not the viewport.
Except in IE Quirks Mode, where it goes around the scrollbar. In Quirks Mode, <body> represents the viewport; setting body.style.overflow.hidden removes the page's scrollbar. This is definitely wrong; you don't want Quirks Mode.
Confusing the matter further, there are some funny non-standard special-case behaviours that imply the root element is the viewport.
In IE (Standards Mode), the root element's 'overflow' property is set to 'scroll', and you can set it to 'hidden' to remove the viewport scrollbar. Also 'offsetHeight' is the height of the viewport and not the actual height of the element as demonstrated by the border.
In other browsers the offsetHeight is the expected value, but (presumably for compatibility) you can still set document.documentElement.style.overflow to 'hidden' (from the default 'visible') to remove the viewport scrollbar. Curiously in Opera the currentStyle.overflow property will still show 'visible' when you have done this.
The upshot is, if you want to ensure the viewport has no scrollbar, you write:
html { overflow: hidden; height: 100%; }
and ensure you use a Standards Mode doctype. The ‘height: 100%’ rule takes care of the case where a browser follows the standard and doesn't map the root element's scrollbar onto the viewport: this sets the height to match the viewport via the ‘initial containing block’, so there will be no need for the parent viewport to show a scrollbar.
bobince
2009-09-10 10:03:05