How to make a square div on pure css, which has percentage dimensions and is nested in div = monitor screen?

Question

css

Hello.
I will not indicate all the data, I will explain in general, I think it will be clear.
The bottom line is, there is a div with parameters width: 100% and height: 100% equal to the browser screen.
You need to place a div = square in it, but its sides or side are specified strictly in percentages in order to maintain adaptability. For example width: 50% and margin: 10% 0 0 10%;
I know how to do it using scripts, the question is: can it be done with pure css?
Thanks in advance!

Answer 1

In CSS, there are types vh and vw - the height of the screen and its width, respectively. You can put for div:

width: 50vw;
height: 50vw;

Answer 2

there is a cool hack

.b {
width:20%;
padding-bottom:20%;
}

Answer 3

Thanks to all!