URL: https://www.joshwcomeau.com/css/height-enigma/
Really interesting deep dive into the CSS height property.
So here’s the core thing to know: in CSS,
widthandheightare fundamentally different. By default, they’re calculated in totally opposite ways.
When calculating an element’s default
width, the browser looks up the tree, to the element’s parent. But when calculating an element’s defaultheight, well, that depends on the element’s children. So the browser has to look down the tree instead.
Unlike every other node on the page,
<html>doesn’t have a parent, since it’s at the very top of the tree. So when we setheight: 100%, it isn’t using some parent element’s content box. Instead, it uses the viewport itself.Crucially, this means that the
<html>tag has a knowable height, since the dimensions of the viewport don’t depend at all on the children within. There is no CSS I can write that will affect the width or height of the browser window, after all!