How do I change div size when screen size changed?

January 24, 2024

When I change the screen size, I want to change the div size according (note: without using a button or component)

    <div id="main-page">
      <div class="container-fluid p-0">
        <div class="row">
          <div class="col-lg-12">
            <div id="height" style="color: wheat;"></div>
          </div>
        </div>
      </div>
    </div>

    var width = $(this).width();
    var height = $(this).height();
    
    $(document).ready(function() {
       $("#main-page").width(width).height(height);
    }) ;

>Solution :

You need to need to set the width and height to desired element on resize event. The resize event fires when the document view (window) has been resized. See the following example.

$(document).ready(function() {
  changeSize();
});


$(window).on("resize", function() {
  changeSize();
});

function changeSize() {
  var width = $(this).width();
  var height = $(this).height();
  $("#main-page").width(width).height(height);
  $("#height").text(`Height: ${$("#main-page").height()} Width: ${$("#main-page").width()}`);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="main-page">
  <div class="container-fluid p-0">
    <div class="row">
      <div class="col-lg-12">
        <div id="height" style="color: wheat;">

        </div>
      </div>
    </div>
  </div>
</div>