如何获取浏览器视口宽度&；Javascript中的高度，并应用于CSS ID'；s

是否有一种方法可以使用Javascript获取实时

宽度

和

高度

值，并将它们应用于许多

div id

？我想建立一个站点，它有5个部分，它们总是

宽度：100vw

和

高度：100vh

。一次只能看到一个部分，因为每个部分都有一个

#

锚定，并且垂直滚动被禁用

我遇到的问题是，当我调整浏览器窗口的大小时，CSS无法保持，必须刷新以获得

width

和

height

部分的新值。我想知道Javascript是否有办法持续监视浏览器的

宽度
和
高度
，并将这些值应用于一组
id

示例

浏览器窗口是1000px乘以500px，因此
id#one、#two
现在有一个
宽度：1000px
和
高度：500px
，当浏览器的大小调整为1200px乘以600px时，CSS中
#one、#two
的值将设置为
宽度：1200px
和
高度：600px

这是我的
正如@gary storey所说的，使用调整大小事件：

$(window).resize(function() {
   var curWinWidth  = $(window).width();
   var curWinHeight = $(window).height();
   // do stuff here
});

我在自己的页面上这样做：

$(window).resize(function() {
    <!-- get viewport size//set content size -->
    var currentViewPortHeight = $( window ).height();
    var currentViewPortWidth = $( window ).width(); 
    $("#mainFrame").css({ "height" : currentViewPortHeight, "width" : currentViewPortWidth });
    $("#mainFrame").resize();   
};

$（窗口）。调整大小（函数（）{
var currentViewPortHeight=$（窗口）.height（）；
var currentViewPortWidth=$（窗口）.width（）；
$（“#大型机”）.css（{“高度”：currentViewPortHeight，“宽度”：currentViewPortWidth}）；
$（“#大型机”）.resize（）；
};

不过，您可以设置一个超时时间间隔，因为此事件在windo resize期间经常触发，特别是当用户使用拖放时。根据我的stackoverflow研究，最好是300毫秒的超时，以获得平滑的调整大小过渡，而不是频繁触发…
您应该查看
resize
事件。在jQuery中，
$（窗口）。在（'resize'，函数（）{/*在此处重新计算大小*/}）；
当然-您必须更改#大型机选择器以匹配您自己的div id或类