當瀏覽器/窗口調整大小時用於div的JQuery/Javascript自動調整大小

Question

我只有1個div，我想要的是當瀏覽器調整大小時，div的高度和寬度將自動調整大小。例如，我向下拉瀏覽器高度，那麼div的高度也會增加，當我拉動瀏覽器的寬度時，div的寬度也會增加。反之亦然，當瀏覽器縮小/縮小其寬度和高度時，div也會這樣做。

https://jsfiddle.net/koykoys/eghL1cjp/2/

$(window).resize(function(){ // On resize 
 
     $("#mydiv").css('height','+=1px','width','+=1px'); 
 
});

#mydiv{ 
 
    border: solid 2px #3675B4; 
 
    height:300px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<div id = "mydiv"> 
 

 
</div>

Answer 1

您應該使用，而不是JavaScript的CSS。

使用下面的類

#mydiv{ 
    border: solid 2px #3675B4; 
    height:100vh; 
    width:100vw; 
} 

Updated Fiddle

vh代表視高和vw是視口寬度

所以你的DIV越來越height:100vh;意味着視高度的100％和width:100vw;手段100％的視口寬度

Read more about viewport units in detail

更新 -

您應該避免使用JS這個，但由於某種原因，如果你要。

這應該工作

var resize = function() { 
    var windowWidth = $(window).width(); 
    var windowHeight = $(window).height(); 
    console.log(windowWidth) 
    console.log(windowHeight) 
    $("#mydiv").css({ 
    "height": windowWidth + "px", 
    "width": windowWidth + "px", 

    }); 

    } 
$(document).ready(resize); 
$(window).on("load resize", resize); 

Updated Fiddle