Question

是否可以根据像素中高度的css制作正方形div？

这个问题类似到this one（标记为重复），但在这种情况下，我希望高度以像素或任何单位设置。 < / p>

基于宽度时，有一个简单的解决方案：

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

但这里＆＃39;身高跟随宽度＆＃39; 。我正在寻找＆＃39;宽度跟随高度的解决方案。因此，如果我将高度设置为300px，宽度将会跟随它。

现在我正在使用javascript进行操作，更新窗口调整大小。但是我想找到一个CSS解决方案，这就是为什么我没有找到一个javascript解决方案

Answer 1

您可以使用新的viewport size units

<强> CSS

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