[分享]css元素高度等于浏览器窗口

在 Web 开发中，我们经常需要根据浏览器窗口的大小设置元素的高度。CSS 提供了一个简单的方法来实现：使用 vh 单位。height: 100vh; 上述代码将元素的高度设置为浏览器窗口的高度。在这...

在 Web 开发中，我们经常需要根据浏览器窗口的大小设置元素的高度。CSS 提供了一个简单的方法来实现：使用 vh 单位。

height: 100vh; 

上述代码将元素的高度设置为浏览器窗口的高度。在这种情况下，元素的高度将始终等于浏览器窗口的高度，无论浏览器窗口的大小如何改变。

需要注意的是，vh 单位不支持 Internet Explorer 9 及更早版本。如果需要为这些浏览器设置相同的效果，可以通过 JavaScript 来实现。以下代码使用 jQuery 的方式：

$(window).on("resize", function() {
  // 获取浏览器窗口的高度
  var windowHeight = $(window).height();
  
  // 将元素的高度设置为浏览器窗口的高度
  $("selector").css("height", windowHeight + "px");
}).resize(); // 初始加载时即执行一次 

上述代码将在浏览器窗口大小改变时检测高度，并将元素的高度设置为浏览器窗口的高度。由于 JavaScript 代码，因此无需使用 vh 单位。

总之，通过使用 vh 单位或 JavaScript，我们可以轻松地将元素的高度设置为浏览器窗口的高度，为网站的设计提供更好的灵活性和响应能力。