I think about it slightly differently; I’m sure I’ll get corrected if this is wrong. The first realization is that the height of the parent, by default, expand

I think about it slightly differently; I’m sure I’ll get corrected if this is wrong. The first realization is that the height of the parent, by default, expands to fit the content. And so the default behavior that people expect, (just taking the computed height of the parent), isn’t possible; it’s circular reasoning. It’s these situations, where the parent doesn’t have a defined height, that the percentage height does nothing. Percentage width and height are both calculated by going up the tree, to find the first parent with a defined width and height. Block displayed elements by default have a defined width. They default to “width: 100%” basically. And by default, the root html tag is block displayed. This is why width seems to work out of the box, but height doesn’t. I start my websites with html, body { width: 100%; height: 100%; /* adjust padding and margin as appropriate */ } This means that I can create a root div element with height 100% and have it do what you’d expect. I skimmed over some stuff, let me know if you want a blog post.