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)
See a nice page here for CSS units : http://css-tricks.com/the-lengths-of-css/