I'm currently working on a website project and I'm still new to using jquery. I encountered an issue where the .css() function does not seem to change the height of a specific div, although it works fine for another div on the same page. You can access the website through this link:
To see the problem in action, you need to open any article by clicking a grey box and then click the white "close" box located in the top right corner.
The code causing the issue is on line 506, which is the sixth line in the following snippet:
var $wWidth = $(window).width();
var $wHeight = $(window).height();
var $newheight = Math.round($wHeight * 0.8 - 200) + 'px';
$('#container').css('height',$newheight);
$('#theThing').html($newheight);
$('#thisThing').html($('#container').css('height'));
$('#makeMeScrollable').css({'height':$wHeight * 0.8 - 200,'width':$wWidth - 260});
Even though the #makeMeScrollable div is adjusting its css properly, the #container div seems to be unaffected.
The #theThing and #thisThing divs are displaying that the $newheight value is correct, but for some reason, the container height does not reflect this adjustment as demonstrated in the demo page.
I have attempted various approaches such as removing rounding, excluding the 'px' unit at the end, and testing other modifications, yet the issue persists...