Square div with fixed height using only CSS - html

Question

Everything is in the title !
How can I do to make my div's width equals to its fixed height using CSS only ?
HTML Code
<div class="container">
<div class="square"></div>
</div>
CSS Code
.square{
height:80%;
}
I know I can do the opposite (fixed width) using
.square{
width : 20%;
padding-top:20%
}
because padding-top is relative the width of the container.
I also know I can do it using simple JQuery but don't want to use javascript.
Thanks,

Answer 1

Use vw unit :
.square {
background: #000;
width: 50vw;
height: 50vw;
}
<div class="square"></div>

Answer 2

You need to use Viewport-percentage lengths vw
.square {
background: #000;
width: 20vw;
height: 20vw;
}
<div class="square"></div>

Answer 3

It seems like you want your div to be inside a .container which can be any size. This is easy if the size of that .container is based on the viewport width. I've created an example, below, which shows a block of square divs 2x2 inside of a .container. The .container can be any size. It is important the height and width of the container be based on viewport width.
.container {
width: 90vw;
height: 90vw;
margin: 0 5vw;
}
.container > div {
width: 48%;
height: 48%;
margin: 1%;
display: inline-block;
}
.square1 {
background: #aaa;
}
.square2 {
background: #bbb;
}
.square3 {
background: #ccc;
}
.square4 {
background: #ddd;
}
<div class="container">
<div class="square1"></div><div class="square2"></div><div class="square3"></div><div class="square4"></div>
</div>

Answer 4

If you don't want to use vw, try this out.
https://jsfiddle.net/zofoeLyL/2/
CSS
.square{
width:20%;
position:relative;
background-color:#005f95;
}
.square:before {
display: block;
padding-top: 100%;
}
HTML
<div class="square">
</div>
That will make the height always equal to whatever width % you decide to use.