如何使 div 始终为页面高度的 80% 且完全为正方形？

Question

我知道这是一个令人困惑的问题，但我想不出更好的表达方式！基本上，我需要一个 div 元素始终为页面高度的 80%，并且 div 的宽度始终与高度相同（不是页面宽度的 80%，而是与 80% 的长度相同）页面的高度，所以 div 是方形的。）我已经研究了很多，但还没有找到一种方法来做到这一点。我愿意使用 JS，但更愿意只使用 CSS 来实现这一点。这基本上是我希望我的布局如何查看几种不同的页面高度/纵横比： 我的页面布局

蓝色 div 应该是页面高度的 80% 并且应该始终是 square。我需要这个的原因是因为我希望页面永远不会有滚动条，所以 div 必须响应页面高度，但我也希望 div 是一个完美的正方形。

谢谢！

Answer 1

您可以使用 vh -> 1vh 等于视口初始包含块高度的 1%。

https://developer.mozilla.org/en-US/docs/Web/CSS/length

所以你的班级会是这样的：

.yourClass {
  height: 80vh;
  width: 80vh;
}