CSS square based on height [duplicate]

Question

Is it possible to make a square div with css based on its height in pixels?

This question is similar to this one (marked as duplicate), but in this case I want height to be set in pixel or any unit.

When based on width, there is a simple solution :

.mydiv {
    height: 0;
    padding-bottom: 100%;
}

But here 'height follows width'. I'm looking for solution where 'width follows height'. So if I would set height to 300px, width would follow it.

For now I'm doing it using javascript, updating on window resize. But I would like to find a CSS solution, thats why I'm not looking for a javascript solution

Here is a playground

Answer 1

You could use the new viewport size units

JSfiddle

CSS

html,body {
    height: 100%;
    margin: 0;
}
div {
    background: red;
    height: 100vh;
    max-width:100vh;
    box-sizing: border-box;
}

Support is effectively IE9 and up