Making an element full height of browser window

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.
The 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 height: 50vh;

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 height: 100%;

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.
I suggest using JavaScript but that defies the purpose of this tutorial.