To use % heights in CSS, the parent element must have an explicitly defined height, or a % height that can be traced back through parents to a defined height.
When the html and body have auto height, these root parents have no defined height, so subsequent % heights in their child elements mean nothing. 100% of auto = ?
I would question the use of the section elements here, you seem to be using it as a generic block container, the role usually given to div elements.