var width = $(this).width();
var height = $(this).height();
$(document).ready(function() {
$("#main-page").width(width).height(height);
});
$(window).on("resize", function() {
width = $(this).width();
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>