How To Specify div Element Sizes as Percentages

[AyrtonB]

I'm trying to specify the size of an element relative to the size of the screen it's being used on. If I use percentages like I normally would nothing appears, e.g. with this code in index.md.

<style type="text/css">
#block {
    width: 100%;
    height: 50%;
    margin: 0;
    background-color: blue;
}
</style>

<div id="block"></div>

The block appears if I use pixel sizes, e.g. with the code below. Any help that can get it to appear using percentages instead of pixels would be much appreciated!

<style type="text/css">
#block {
    width: 600px;
    height: 500px;
    margin: 0;
    background-color: blue;
}
</style>

<div id="block"></div>

[squidfunk]

This is probably rather unrelated to Material to MkDocs, so maybe you might have more luck asking this question on StackOverflow, as it's a general HTML/CSS support question 😉