height: 100vh = 100% of the viewport height
height: 100% = 100% of the parent’s element height
That is why you need to add height: 100% on html and body, as they don’t have a size by default
Something you have to know : if you use % for vertical margin or padding, % will be calculated on the width of the parent element, not the height.
Tip : try using vh and vw units for font size :) I like this one (not supported in some browsers I know) : font-size: calc(.5vh + .5vw); (for example)