body tag overflow (auto, visible?)

The body (and html) tag are special cases, being at the root of the DOM hierarchy, and browsers must render these as if they were set to auto.

This is outlined in the overflow documentation on W3 back in CSS 2.1:

UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.


Had to look into some white papers for this one. The body element is a special element in the DOM and has some "pseudo-immutable" properties that I'll get to in the answer.

First off, W3C position documentation points out the following:

The BODY element defines a special implicit container having the following properties:

  • Its position, width, height and clipping region are determined by the User Agent, and may not be modified.
  • It establishes a coordinate system for child elements, with the origin at the document's logical top, left corner.

Knowing this, we dig into what the defaults for these properties are for the body. The position is set to static which ends up making its height and width properties inherited from the parent html element.

I found this documentation a little bit strange in that I could change the value of the height on the body element and set a border around it:

body {
  border: 1px solid black;
  background-color: #1db3e7;
  height: 100px;
  width: 30em;
  margin: 0 auto;
  border-top: none;
  padding: 1em;
}
<body>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis dolor eget risus ultrices mattis. Maecenas dolor est, malesuada ac efficitur sed, cursus quis nibh. Sed vulputate arcu molestie ipsum pharetra hendrerit vitae ac mauris. Duis quis purus quis elit varius convallis. Proin dictum nec purus eget accumsan. Suspendisse dignissim sollicitudin risus. Praesent nec quam in nisl dictum lobortis. Maecenas ultricies purus nec turpis egestas, ultrices elementum arcu pretium. Vestibulum id diam eu arcu placerat ultrices. Donec porta augue magna, eu tristique dui sodales in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst.

</body>

However, no matter what position and overflow I set, the text always has the capability to go beyond this border. This speaks to the immutable-ness of the position property, but it did make me question that statement for height.

Finally, the html element is what is actually making the scrollbar appear, based on the body's width and height dependency on the html element and its default position value. The first entry to controlling the page's scroll would be on the first child element of the body element.

Tags:

Css

Recent Posts