html - 制作一个高度为 100% 的正方形

Question

我正在尝试仅在 css 中制作一个高度为屏幕 100% 的正方形。我知道我可以通过计算高度并将其应用于宽度和高度来使用 JS 来做到这一点，但我只在寻找 css 解决方案。

我找到了 following answer但看起来它使宽度为 100%。当我试图使高度 100% 时

.square{
    height: 100%;
    padding-right: 100%;
    background: red;
}

没有任何显示(看看这个 fiddle )。知道哪里出了问题吗？

Answer 1

试试这个 http://jsfiddle.net/webtiki/c43QG/

.square{
    height:100vh;
    width:100vh;
}