CSS square based on height [duplicate]

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