在jquery中使用css将div拉伸到浏览器高度_Jquery_Html_Css

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

jquery html css

在jquery中使用css将div拉伸到浏览器高度,jquery,html,css,Jquery,Html,Css,我试图在jquery中使用css将div扩展到浏览器高度。但它似乎不起作用。我能够将100%的宽度应用于div，并且可以正常工作。但不是高度。有什么原因吗？谢谢 $（函数（）{ $（'.test'）.css({ “背景色”：“黄色”， “宽度”：“50%”， “高度”：“50%”， }); }); 使用100vh。这意味着视口高度。100%不起作用的原因是因为元素采用父元素的高度。不是你的窗口/视口被阻止的元素自动获得100%的宽度。但就元素的高度而言，情况并非如此。因此，从html到元素

我试图在jquery中使用css将div扩展到浏览器高度。但它似乎不起作用。我能够将100%的宽度应用于div，并且可以正常工作。但不是高度。有什么原因吗？谢谢


$（函数（）{
$（'.test'）.css({
“背景色”：“黄色”，
“宽度”：“50%”，
“高度”：“50%”，
});
});

使用100vh。这意味着视口高度。100%不起作用的原因是因为元素采用父元素的高度。不是你的窗口/视口

被阻止的元素自动获得100%的宽度。但就元素的高度而言，情况并非如此。因此，从html到元素的所有内容都应设置为100%。或者你应该使用100vh。

这是因为你需要对主体和html应用100%，因为它们包围着你的div，并迫使它达到它们的高度。您还可以对100%的视口高度使用100vh

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

您还可以使用100vh而不是100%，这意味着视口（100%）

请参阅：

如果必须使用jQUery执行此操作，请使用

$（窗口）.width（）

和

$（窗口）.height（）

获取浏览器尺寸

像这样：

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

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

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

vw

和

vh

代表

视口宽度

和

视口高度

您甚至可以将上述内容转换为CSS类，然后使用jQuery的

addClass（）

函数简单地应用该类

谢谢Fizzix！它起作用了！是的，我必须在JQuery中这样做。这太棒了！谢谢

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