如何使div的宽度与屏幕高度相同？答案

【问题标题】：How to make div's width same as screen height?如何使div的宽度与屏幕高度相同？
【发布时间】：2018-09-03 05:59:50
【问题描述】：

所以。我已经修复了从屏幕上到下具有 100% 高度的定位 div，我需要将其宽度匹配为与所有屏幕尺寸上的高度相同。我是怎么做到的？

（编辑标题问题）

div {
    position:fixed;
    top:0;
    left:0;
    height:100%;
}

【问题讨论】：

嗨 MrO，欢迎来到 Stack Overflow！在发布问题之前，请在此处快速搜索相关答案。这个确切的问题已经被问过/回答过很多次了！ Here's just one example
我在提问前搜索了 Google 和 Stack Overflow，但没有找到答案。这也没有回答我的问题。当高度为 100% 时，我需要知道如何使 div 的宽度与高度相同。
@glennsl 这不是这个问题的重复

【解决方案1】：

换个角度想，由于元素是固定的，100% 高度意味着屏幕的 100% 高度，所以我们可以像这样使用 vh 单位而不是 %：

.box {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vh;
  background: red;
}

<div class="box">
</div>

【讨论】：