I've built a full screen web application that I don't want to scroll, so I used this code:
$("body").css("overflow", "hidden");
However, after adding a resize listener:
$(window).resize(function(){
console.log("Inner height: " + $(window).innerHeight());
console.log("Height: " + $(window).height());
console.log("Document: " + $(document).height());
console.log("Body: " + $("body").height());
});
The issue is that the reported height only increases when I make the window taller. When I try to make it smaller, the reported height remains incorrect - increasing slightly instead of decreasing. The content consists of an html <video> element that occupies the entire window space upon loading.
I have come across information stating that the height() function may not work properly with overflow: hidden, but couldn't find a clear explanation as to why. Any suggestions on how I can obtain the correct height measurement? Thank you!