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

Question

我正在尝试将元素高度设置为等于视口宽度。如何做到这一点？（以下面的小提琴为例）...

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

Answer 2

你必须设置它的高度：100%；和 html，正文高度：100%；

html,body{height:100%;padding:0;margin:0;}
.box{height:100%;position:relative;background-color:grey}

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

Answer 3

您可以使用以下 javascript 方法中的一种适当的方法来执行此操作：

window.screen.height    
window.screen.availHeight
document.documentElement.clientHeight   
document.documentElement.offsetHeight   
document.documentElement.scrollHeight

此链接可能有用：http ://ryanve.com/lab/dimensions/

Answer 4

使用元标记将其添加到您的

<META NAME="viewport" CONTENT="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>

在你的 CSS 中

@-ms-viewport{
  width: device-width;
  height: device-height;
}