html - 如何使 div 始终占页面高度的 80% 并且完全呈正方形？

Question

我知道这是一个令人困惑的问题，但我想不出更好的措辞方式!基本上，我需要一个 div 元素始终为页面高度的 80%，并且让 div 的宽度始终与高度的宽度相同(不是页面宽度的 80%，而是与 80% 的长度相同)页面的高度，以便 div 是方形的。)我已经研究了很多，但还没有找到一种方法来做到这一点。我愿意使用 JS，但更愿意仅使用 CSS 来完成此操作。这基本上是我希望我的布局如何查看几个不同的页面高度/纵横比: MY PAGE LAYOUT

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

谢谢!

Answer 1

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

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

所以你的类(class)应该是这样的:

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