The secret is in this summation: to determine width you look up the tree, to determine height you look down the tree.
width looks up the tree and fills the space made available by its parent. In this case it will look all the way up to the body tag which looks to the html tag which, by default, has the width of the document. So the div does too.
That is why width: 100% does what a lot of people naturally expect: it goes the full width of the screen. Whereas height: 100% doesn't do what people often expect and go the full height of the screen.
[
add
]
[
|
|
...
]