Quote:
Originally Posted by JSWolf
You don't use the height and/or width of the vewport. You use %. That works and you don't need to know the dimensions of the viewport.
|
In html/css "height: 25%" does not mean 25% of the screen height. It is 25% of the height of the containing block,
the html body in this case. But since the height of the body depends on the height of the elements within it, the value cannot be resolved and it does not work consistently.
Actually, upon further thought the containing block should really be the same as the screen in this case. I take back the above.
The vh and vw units are percentages of the screen size. "height: 25vh" makes the element 25% of the screen high. That is what is desired in this case. (It is too bad that this isn't well supported.)