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

【问题标题】：How to make div always 80% of page height and completely square?如何使 div 始终为页面高度的 80% 并且完全为正方形？
【发布时间】：2018-04-10 13:28:22
【问题描述】：

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

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

谢谢！

【问题讨论】：

考虑使用view height/width units，就像这个答案：stackoverflow.com/questions/34089994/…

标签： html css user-interface responsive

【解决方案1】：

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

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

所以你的班级应该是这样的：

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

【讨论】：

【解决方案2】：

您可以以vh 为单位声明宽度和高度，这表示视口高度的 1%。在这种情况下，那就是

div{
  width:80vh;
  height:80vh;
}

话虽如此，这是一个非常糟糕的方法。如果视口高度大于宽度（例如在任何移动设备上或调整大小的窗口），您将获得水平滚动条或隐藏的溢出内容。

对于这种情况，最好使用vmin，它是较小视口尺寸的 1%

div{
  width:80vMin;
  height:80vMin;
}

或者，您可以使用媒体查询来检测视口是处于横向（宽）还是纵向（高）模式

@media screen and (orientation: landscape) {
  div{
    width:80vh;
    height:80vh;
  }
}

@media screen and (orientation: portrait) {
  div{
    width:80vw;
    height:80vw;
   /*or whatever*/
  }
}

【讨论】：

这就是解决方案！非常感谢！

【解决方案3】：

.equalSize {
  width: 80vh;
  height: 80vh;
  background-color: red;
}

&lt;div class="equalSize"&gt;&lt;div&gt;

您可以在单元中使用 css 构建。 vh = 视口高度 https://www.w3schools.com/cssref/css_units.asp

另一种选择是使用此处解释的纵横比：Aspect ratio

【讨论】：