css - 如何将元素的高度设置为 100% 视口(viewport)宽度

Question

我正在尝试将元素高度设置为等于视口(viewport)宽度。如何实现？ (以下面的fiddle为例)...

https://jsfiddle.net/minlare/0hnn7pfy/

body{margin:0;}    
div{min-height: 100vw;}

仅当存在滚动条时才会出现高度和宽度不匹配。

我需要考虑可能存在滚动条的情况，为我的 div 保留正方形格式。

Answer 1

尝试:

body{
  margin:0;
  overflow:hidden;
}
div{
  background: lightblue;
  height: 100vw;
  width:100vw;
}

这会移除滚动并为 div 提供相同的宽度和高度