There are a fiew ways to achive this..
To have an element that has the height of the viewport we will have to use
vw, vh, vmin, vmax units. This will offer the best result but they are known to have
bad browser support.
vh units are proportional with the viewport (viewport percentage) so if for instance we want to have an element that has half the viewport height we will have a code that looks like this
Another solution is to use percentage value but they are related with the container of our element so if our container is bigger that the viewport our element will exceed the viewport size as well.
The code will look somethin like
In the example below, the yellow block is the same as the green one because there isn't any other content to increase the height of the
body, if there was the green one wold have remained the same size and the yellow one would increase in size in relation with the body.
In conclusion the percentage value is good for some chases but not all and the
vh is exactly what we need but it does not work on all browsers.