Search code examples
htmlcssviewport

Viewport height problem when browser goes fullscreen

Well this is an odd behaviour.

I'm coding the frontend of a metrics app that must be viewed in a large tv. I use Html, Js and Css (bootstrap 4).

It's for general public so we must hide browser tabs, etc.. Whenever I set the browser to go fullscreen, a big white row appears at the bottom of the page. Please see attached picture.

enter image description here

The odd part is that there isn't any element there. It's like the viewport just gets bigger and forgets to cover the bottom with stuff.

Is this a known issue?

How to avoid this and cover on fullscreen?

I'ver tried auto, cover, 100% height, etc..

Solution

  • I found the solution right after posting my question.

    html,body
{
    min-height:100%;
}

    The thing is that if you apply height only to body, it will seek for the parent (html) and found that the size is the same as before so both must have the property in order to get the 100% of the height.