I understand the width & height of the visual viewport, as defined by this article, at least on a desktop, is the dimensions of the visible rectangle a user can see when they scroll to the top left of the page.
Why is the background red for, what looks like, the visual viewport when the html's height is 0?
html {
background-color: red;
}
body {
line-height: 20px;
margin: 0px;
} <html>
<body>
</body>
</html>
A couple of misconceptions here.
First of all, not all CSS properties are inherited in the cascade.
You can look up any CSS property here and then see the formal definition. For instance, here is the formal definition for height:
Initial value: auto
Applies to: all elements but non-replaced inline elements, table columns, and column groups
Inherited: no
Percentages: 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), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.
Computed value: a percentage or auto or the absolute length
Animation type: a length, percentage or calc();
You can see that height is not inherited, and it's default value is auto, whose definition says "The browser will calculate and select a height for the specified element.". When the browser calculates the height of an element, it will make it as small as possible while still fitting all the content inside.
The width property is also not inherited; to understand how width is calculated by default you must know the difference between block elements and inline elements. In short, a "block" element fills its parent's width, while an inline element (like span) takes up its minimum width. Every html tag is naturally either a block or inline element (except some special ones, like form fields, which are "replaced" elements), and you can always make a block element behave like an inline one (or vice-versa) using the CSS display property.
Things get a little less consistent with the root html element. Some browsers have that root element's initial height set to "auto", and some give it an initial minimum height of 100% of the viewport. The body element, however, will consistently have an unset (auto) height. Backgrounds on the html and body elements have an additional subtlety as described here.
Furthermore, the "visual viewport" (as you call it) is a scrolling container, meaning its children can be larger than the container. The scrollbar you see when your HTML is taller than the viewport belongs to the viewport, not to the html element.
You can reproduce this with divs:
.viewport {
height: 50px;
overflow: scroll;
}<div class="viewport">
<div class="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor augue quis mi finibus, in tempus est finibus. Aenean aliquet ultricies magna eu posuere. Sed augue erat, placerat sit amet massa dignissim, aliquam placerat nisl. Donec et lacus molestie,
semper dolor sit amet, mattis erat. Pellentesque id enim urna. Aliquam posuere neque orci, et iaculis ex scelerisque vitae. Duis congue placerat eros a semper. Sed porttitor arcu ipsum, sed luctus est tempus at. Mauris ut fermentum tellus, sed suscipit
risus. Maecenas sit amet dignissim urna. Suspendisse ullamcorper nisi urna, id porttitor urna lacinia eget. Curabitur id ornare dolor. Pellentesque in augue tristique, convallis erat eget, malesuada elit. Suspendisse potenti. Fusce sollicitudin semper
nibh et porttitor. Nullam fringilla varius ligula, quis semper dui sollicitudin sed. Mauris cursus odio ut libero ornare, ut feugiat ipsum volutpat. Pellentesque lobortis sollicitudin orci sed viverra. Pellentesque in ipsum dui. Curabitur commodo
aliquet ante eu tempor. Proin justo eros, pharetra eget ultricies nec, mollis id nisl. Sed vehicula fermentum mi, et mollis tortor imperdiet quis. Aliquam erat volutpat. Quisque vel nunc ultricies, porttitor lacus a, laoreet ex. Donec lobortis semper
diam et tempus. Proin eu ex id nibh porttitor condimentum. Nulla facilisi. Suspendisse porta libero vel consequat vehicula. Suspendisse malesuada ipsum massa, in dignissim arcu rhoncus eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia curae; Praesent eu iaculis odio, non pulvinar neque. Aliquam eu diam a ligula tincidunt fermentum. Nullam convallis lorem at lectus pulvinar, eget tincidunt mauris pretium. Cras sollicitudin lacus quis dictum malesuada. Integer porttitor
sodales convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque bibendum faucibus lacus. Sed sagittis quam non finibus placerat. Nunc eros libero, dignissim vel interdum ac, rutrum et ex. Integer
nec scelerisque nisi. In at ante nibh. Vivamus vehicula erat et lacus tincidunt hendrerit. Pellentesque porttitor, eros sed tincidunt molestie, mi tortor interdum velit, at convallis neque lacus eu massa.
</div>
</div>If you want the html element to be exactly the viewport size, with the body element scrolling inside the html element, you can do that with CSS.
You may or may not already know about the "Viewports Units", a measurement unit which can be used in CSS. This allows you to set size and distance measurements based on a percentage of the viewport's height or width. This is very useful for exactly this purpose.
html
{
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: scroll;
background: #000;
color: #fff;
}
body {
min-height: 100vh;
}<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor augue quis mi finibus, in tempus est finibus. Aenean aliquet ultricies magna eu posuere. Sed augue erat, placerat sit amet massa dignissim, aliquam placerat nisl. Donec et lacus molestie, semper dolor sit amet, mattis erat. Pellentesque id enim urna. Aliquam posuere neque orci, et iaculis ex scelerisque vitae. Duis congue placerat eros a semper.
</p>
<p>
Sed porttitor arcu ipsum, sed luctus est tempus at. Mauris ut fermentum tellus, sed suscipit risus. Maecenas sit amet dignissim urna. Suspendisse ullamcorper nisi urna, id porttitor urna lacinia eget. Curabitur id ornare dolor. Pellentesque in augue tristique, convallis erat eget, malesuada elit. Suspendisse potenti. Fusce sollicitudin semper nibh et porttitor. Nullam fringilla varius ligula, quis semper dui sollicitudin sed. Mauris cursus odio ut libero ornare, ut feugiat ipsum volutpat.
</p>
<p>
Pellentesque lobortis sollicitudin orci sed viverra. Pellentesque in ipsum dui. Curabitur commodo aliquet ante eu tempor. Proin justo eros, pharetra eget ultricies nec, mollis id nisl. Sed vehicula fermentum mi, et mollis tortor imperdiet quis. Aliquam erat volutpat. Quisque vel nunc ultricies, porttitor lacus a, laoreet ex. Donec lobortis semper diam et tempus. Proin eu ex id nibh porttitor condimentum. Nulla facilisi.
</p>
<p>
Suspendisse porta libero vel consequat vehicula. Suspendisse malesuada ipsum massa, in dignissim arcu rhoncus eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent eu iaculis odio, non pulvinar neque. Aliquam eu diam a ligula tincidunt fermentum. Nullam convallis lorem at lectus pulvinar, eget tincidunt mauris pretium. Cras sollicitudin lacus quis dictum malesuada. Integer porttitor sodales convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
</p>
<p>
Pellentesque bibendum faucibus lacus. Sed sagittis quam non finibus placerat. Nunc eros libero, dignissim vel interdum ac, rutrum et ex. Integer nec scelerisque nisi. In at ante nibh. Vivamus vehicula erat et lacus tincidunt hendrerit. Pellentesque porttitor, eros sed tincidunt molestie, mi tortor interdum velit, at convallis neque lacus eu massa.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor augue quis mi finibus, in tempus est finibus. Aenean aliquet ultricies magna eu posuere. Sed augue erat, placerat sit amet massa dignissim, aliquam placerat nisl. Donec et lacus molestie, semper dolor sit amet, mattis erat. Pellentesque id enim urna. Aliquam posuere neque orci, et iaculis ex scelerisque vitae. Duis congue placerat eros a semper.
</p>
<p>
Sed porttitor arcu ipsum, sed luctus est tempus at. Mauris ut fermentum tellus, sed suscipit risus. Maecenas sit amet dignissim urna. Suspendisse ullamcorper nisi urna, id porttitor urna lacinia eget. Curabitur id ornare dolor. Pellentesque in augue tristique, convallis erat eget, malesuada elit. Suspendisse potenti. Fusce sollicitudin semper nibh et porttitor. Nullam fringilla varius ligula, quis semper dui sollicitudin sed. Mauris cursus odio ut libero ornare, ut feugiat ipsum volutpat.
</p>
<p>
Pellentesque lobortis sollicitudin orci sed viverra. Pellentesque in ipsum dui. Curabitur commodo aliquet ante eu tempor. Proin justo eros, pharetra eget ultricies nec, mollis id nisl. Sed vehicula fermentum mi, et mollis tortor imperdiet quis. Aliquam erat volutpat. Quisque vel nunc ultricies, porttitor lacus a, laoreet ex. Donec lobortis semper diam et tempus. Proin eu ex id nibh porttitor condimentum. Nulla facilisi.
</p>
<p>
Suspendisse porta libero vel consequat vehicula. Suspendisse malesuada ipsum massa, in dignissim arcu rhoncus eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent eu iaculis odio, non pulvinar neque. Aliquam eu diam a ligula tincidunt fermentum. Nullam convallis lorem at lectus pulvinar, eget tincidunt mauris pretium. Cras sollicitudin lacus quis dictum malesuada. Integer porttitor sodales convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
</p>
<p>
Pellentesque bibendum faucibus lacus. Sed sagittis quam non finibus placerat. Nunc eros libero, dignissim vel interdum ac, rutrum et ex. Integer nec scelerisque nisi. In at ante nibh. Vivamus vehicula erat et lacus tincidunt hendrerit. Pellentesque porttitor, eros sed tincidunt molestie, mi tortor interdum velit, at convallis neque lacus eu massa.
</p>