set the height of a box with JQuery

Question

I want to change the height of a box that has id # block2, I will change it according to the user's browser window, if the window length is 1000px then the box height will be 1000px.

I'll check the size of the browser window each time it's resized

var winHeight = $(window).height(),
    winWidth = $(window).width();

$(window).resize(function(){    
    $('#block2').css("height",winWidth + "px");
    console.log($('#block2').height())
});

if something is wrong please correct it .. because the code I wrote doesn't work in the browser

Answer 1

you can get the height of the element using jquery by:

$('#yourelementid').css('height');

also compute windows width, height in resize event then try applying.

Check this demo:

$(document).ready(function() {


$(window).resize(function() {    
var winHeight = $(window).height();
var winWidth = $(window).width();
$('#block2').css("height", winWidth + "px");
     alert($('#block2').css('height'));
});

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="block2" style"border:1px solid black">
<p>content</p>
</div>

Answer 2

var $win = $(window);

You can get element height and width using

$win.height() and $win.width()

You can set the height of your element by

 $("#yourEelementID").height('Your value');

In Your Case,

$win.on('resize',function(){
$("#block2").height($win.width());
console.log($('#block2').height());});

Check current element height using,

console.log($('#block2').height());