Question

我只有1个div，我想要的是当浏览器调整大小时，div的高度和宽度会自动调整大小。例如，我向下拉浏览器高度，然后div的高度也会增加，当我拉动浏览器的宽度时，div的宽度也会增加。反之亦然，当浏览器收缩/减小其宽度和高度时，div也会这样做。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您应该使用css而不是javascript。

使用以下课程

#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": windowHeight + "px",
    "width": windowWidth + "px",

  });

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

Updated Fiddle

当浏览器/窗口调整大小时，JQuery / Javascript for Div自动调整大小

1 个答案: