Question

I have a full screen web application that should never scroll, so I set:

$("body").css("overflow", "hidden");

However, when I add 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 height is reported correctly when I make the window taller but it’s incorrect when I make it smaller. In fact, the window height (through any of those variables) only increases (correctly if I make it bigger, and a little bit if I make it smaller).

The content, in case it’s relevant, is an html <video> element that takes the whole window space on ready.

I have read that height() won’t work in overflow: hidden, but I couldn’t get a reason why not. Also, how on earth do I get the correct height? Thanks!

Answer 1

you may try setting

html,body {
    height: 100%;
    width: 100%;
}