How to make an element the full height of a page?

If the div is a direct child of body, this works:

body, html {height: 100%; }
div { height: 100%; }

Otherwise, you have to keep adding height: 100% to each of it's parents, grandparents,... untill you've reached a direct child of body.

It's simple. For a percentage height to work, the parent must have a specified height(px, %... whichever). If it does not, then it's as if you've set height: auto;

Another way to do it is as you have in your answer: it's to give it an absolute position value, relative to the element that defines the page's height.

This is the simplest way to make a div take up the full height of a page.

height: 100vh;

vh is Viewport Height, and 1vh is equal to 1% of the height of the viewport. See here for more details on this and other units of measurement in CSS.