浏览器全屏显示时的视口高度问题 [英] Viewport height problem when browser goes fullscreen

问题描述

这是一个奇怪的行为.

我正在编码必须在大型电视中观看的指标应用程序的前端.我使用HTML，Js和CSS(引导程序4).

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.

奇怪的是那里没有任何元素.就像视口变大了，却忘了用东西覆盖底部.

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.

这是一个已知问题吗?

如何避免这种情况并全屏显示?

How to avoid this and cover on fullscreen?

我尝试过自动，覆盖，100％高度等.

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

推荐答案

我在发布问题后立即找到了解决方案.

I found the solution right after posting my question.

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

问题是，如果仅将高度应用于身体，它将寻找父级(html)，并且发现大小与之前相同，因此两者都必须具有该属性才能获得高度的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.

这篇关于浏览器全屏显示时的视口高度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！