jquery - 在 jquery 中使用 css 将 div 拉伸(stretch)到浏览器高度

Question

我试图在 jquery 中使用 css 将 div 拉伸(stretch)到浏览器高度。但它似乎不起作用。我能够将 100% 宽度应用于 div，并且它有效。虽然不是高度。有什么理由吗？谢谢!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script>
	
$(function() {
    $('.test').css({
       "background-color": "yellow",
"width": "50%",
"height": "50%",
    });
	
});
</script>

<div class="test" style="width: 15px; height: 60px; background-color: red"><div>

Answer 1

如果您必须使用 jQUery 执行此操作，请使用 $(window).width() 和 $(window).height() 获取浏览器尺寸。

像这样:

$(document).ready(function() {
  $('.test').css({
    "background-color": "yellow",
    "width": $(window).width(),
    "height": $(window).height(),
  });
});

Click here for a working demo.

---

如果您不需要以编程方式执行此操作，我强烈建议您使用以下 CSS 解决方案:

.test {
  background-color: yellow;
  width: 100vw;
  height: 100vh;
}

vw 和 vh 分别代表 Viewport Width 和 Viewport Height。

您甚至可以将上面的内容变成一个 CSS 类，然后使用 jQuery 通过 jQuery 的 addClass() 函数简单地应用该类。 Here is another demo using that solution.