我只有 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>
最佳答案
您应该使用 css 而不是 javascript。
使用下面的类
#mydiv{
border: solid 2px #3675B4;
height:100vh;
width:100vw;
}
vh
代表viewport-height,vw
是viewport-width
所以你的 div 得到 height:100vh;
表示视口(viewport)高度的 100%,width:100vw;
表示视口(viewport)宽度的 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": windowHeight + "px",
"width": windowWidth + "px",
});
}
$(document).ready(resize);
$(window).on("load resize", resize);
关于javascript - 当浏览器/窗口调整大小时,JQuery/Javascript for Div 自动调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38938747/