Question

我希望 div 标签的高度恰好等于浏览器窗口的高度。因此，如果您调整浏览器大小，则应自动调整。那么我应该如何设置我的身高等于CSS。

我试过了

.class {
  height: 100%;
}

不起作用。

em，rem，vh，wh显然只能使用字体。

但是，如果我将 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>

这是一个example。

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

你可以通过jquery以简单的方式完成它。

 $(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来实现这一目标。请查看以下代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

解决方案2

通过jQuery实现此目的的另一种方法。请查看以下代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

7 个答案: