Short answer would be: If the parent’s height is not set explicitly, the child height will be set to auto.
This article explains why what you are trying to achieve isn’t working: http://www.456bereastreet.com/archive/201306/height_in_percent_when_parent_has_min-height_and_no_height/
This is from the CSS 2.1 specification (which, as far as I know, doesn’t differ from CSS3)
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’.
The solution would then either be to set position:absolute; on the div or height:100%; on the body.
solved min-height and height not working