CSS/HTML5：如何调整 div 标签高度等于浏览器窗口的当前高度？

Question

我希望我的div 标签的高度完全等于浏览器窗口的高度。因此，如果调整浏览器大小，则应自动调整。所以我应该将我的身高设置为等于CSS的高度。

我尝试了

.class {
  height: 100%;
}

不起作用。

em，rem，vh，显然仅与字体一起使用。

但是，如果我将 body 标签进行硬编码为一定量的像素，则该百分比适用于孩子的标签，但这不是动态的。

我想要的：就像我在浏览器中查看此堆栈页面一样。我希望在调整浏览器大小时，我仍然可以获得相同数量的页面查看量，仅针对新尺寸(响应式(调整大小。

谢谢。

Answer 1

您要添加vh，所以类似的东西。

*{
  margin:0;
  padding:0;
}
.container{
  background:grey;
  height:100vh;
}

和html

<div class="container">
  <h1>Hello from the other side</h1>
</div>

这是一个例子。

Answer 2

您需要添加

html, body {
  width: 100%;
  margin: 0;
}

为DIV设置高度参考(任何Div都是另一个元素的孩子，没有另一个容器的Div是body的孩子，它是html的孩子(

Answer 3

您的div父母是身体。height:100%将与父母一样高。因此，您需要这样做。

html,body {
  height:100%;
  margin:0;
}

Answer 4

您可以通过简单的方式来完成。

 $(document).ready(function(){
     var heights = window.innerHeight;
    $(".class ").style.height = heights + "px";
 });

Answer 5

是的，您可以将VH高度添加到DIV并完全同意@Nofel。

，这将对Mozilla和Chrome。它对Safari或IE不起作用。

添加VH属性调整窗口大小。

Answer 6

您可以绑定一个函数以调整窗口大小的容器大小。

html：

<div class="container">
   Content
</div>

CSS：

.container {
   height: 100vh;
}

javaScript：

function resize_container() {
   var height = $(window).height(),
       container = $('.container');
   container.css('height', height);
}
$(window).resize(resize_container);

Answer 7

解决方案1

您可以尝试height :100vh实现这一目标。在下面查看摘要：

body{
  margin: 0;
}
.windowHeight{
  height: 100vh;
  display: block;
  background: #000;
}

<div class="windowHeight">
  
</div>

解决方案2

jQuery做到这一点的另一种方法。在下面查看摘要：

$('.windowHeight').css('height', $(window).height());

body{
  margin:0;
}
.windowHeight{
  background:#000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="windowHeight"></div>