浏览器全屏时的视口高度问题

Question

嗯，这是一种奇怪的行为。

我正在编写一个必须在大电视上观看的指标应用程序的前端。 我使用 Html、Js 和 Css (bootstrap 4).

它是通用的 public 所以我们必须隐藏浏览器选项卡等。 每当我将浏览器设置为全屏时，页面底部就会出现一个大白行。请看附图。

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

这是一个已知问题吗？

如何避免这种情况并全屏覆盖？

我试过自动、封面、100% 高度等。

Answer 1

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

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

问题在于，如果您仅将高度应用于 body，它将寻找 parent (html) 并发现大小与之前相同，因此两者必须有 属性 才能获得 100% 的高度。