Javascript 加载时更改Div宽度并调整大小

我编写这段代码是为了根据屏幕上的可用空间更改包装盒的宽度和高度。当我打开页面时，div加载良好，但当我调整其大小时，div的大小不会改变

var-width=（$（window.width（））-100）；
变量高度=（$（窗口）.height（））-100）；
$（窗口）.ready（函数（）{
$（“#包装”）。宽度（宽度）；
$（“#包装”）。高度（高度）；
});
$（窗口）。调整大小（函数（）{
$（“#包装”）。宽度（宽度）；
$（“#包装”）。高度（高度）；
});

Xyz
自闭症

您需要重新计算尺寸

$( window ).resize(function(){
    width = (($(window).width())-100);
    height = (($(window).height())-100);
    $("#wrapper").width( width );
    $("#wrapper").height( height );
});

---

您需要重新计算事件处理程序中的

高度

和

宽度

变量：

$(window).ready(calculateSize);    
$(window).resize(calculateSize);

function calculateSize() {
    var width = $(window).width() - 100;
    var height = $(window).height() - 100;
    $("#wrapper").width(width);
    $("#wrapper").height(height);
}

但是，请注意，这仅在CSS中是可能的：

#wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 100px;
    bottom: 100px;
}

---

我使用我编写的这个函数，它运行良好：

//when I load the page
window.onload = function(event) { resizeDiv(); }
//when I resize the page
window.onresize = function(event) { resizeDiv(); }

function resizeDiv() {
    vpw = $(window).width()-100; 
    vph = $(window).height()-100;

    $('#wrapper').css({'height': vph + 'px'});
    $('#wrapper').css({'width': vpw + 'px'});   
}

---

您是否想过在CSS中使用媒体查询或相关单元？（VH，VW，%，em）Flexbox也是一个选项，尽管尚未得到普遍支持。