Question

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

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

谢谢！

Answer 1

你可以使用vh - ＆gt; 1vh等于视口的初始包含块的高度的1％。

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

所以你的课程会是这样的：

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

Answer 2

＆＃13;

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

＆＃13;

<div class="equalSize"><div>

＆＃13;

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

另一种选择是使用如此处所述的宽高比：Aspect ratio

Answer 3

您可以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*/
  }
}

如何使div总是80％的页面高度和完全正方形？

3 个答案: