Question

我正在尝试使用jquery中的css将div拉伸到浏览器高度。但它似乎无法正常工作。我可以将100％宽度应用于div并且它可以工作。虽然不是高度。有什么理由吗？谢谢！

＆＃13;

<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>

＆＃13;

Answer 1

使用100vh。这意味着视口高度。 100％不起作用的原因是因为该元素占据了专利的高度。不是你的窗口/视口。

被阻挡的元素自动获得100％的宽度。但是由于元素的高度，情况并非如此。因此，从html到你的元素的所有内容都应设置为100％。不管怎样，或者你应该只使用100vh。

Answer 2

这是因为你需要将100％应用于body和html，因为它们围绕你的div并强制它们达到它们的高度。您也可以使用100vh获得100％的视口高度。

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

CSS

html,body {
height:100%;
min-height: 100%;
}

你也可以使用100vh而不是100％，这意味着视口（100％）。

请参阅：https://snook.ca/archives/html_and_css/vm-vh-units

Answer 3

如果您必须使用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.

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

3 个答案: