移动设备上的100％高度和CSS

Question

我肯定以前会问过这个问题，但我找不到任何相似的东西（有些问题略有相似）

移动浏览器的一个趋势是在向下滚动时隐藏地址栏，这很好，但是对于严重依赖于基于百分比的元素高度的网站存在问题，比如我现在正在制作的响应式网站。

问题是，视口大小会根据地址栏的可见性而改变。 这意味着，当地址栏不可见时，100％高度会大于可见时的大小。 滚动时，这会导致网站重新配置不稳定。 这在移动版Google Chrome上尤其成问题，因为只要您在页面中的任何位置向上滚动，地址栏就会返回。 很多不稳定的重新配置。

在没有地址栏的浏览器方面，我希望100％表示100％。 无论我采取什么解决方案，都需要一些Javascript，但我似乎无法找到获取此信息的方法。 想到的一个选项是屏幕高度，但这意味着不会考虑移动操作系统的通知栏或任何其他永久浏览器UI元素。 所以我想这是第一步，下一步是找到最有说服力的方法将这个高度引入所有基于百分比的高度元素（我知道它可以通过Javascript完成，如果我可以保持这一点会很好尽管如此，并且不会对resize事件进行元素重新调整。）

答案非常感谢。

Answer 1

我在我的网站上遇到了类似的问题，我在页面加载时隐藏了地址栏，并在jQuery中设置了我想要100％高度的元素。 简短的回答是，我不认为你可以单独使用CSS。 这是我的jQuery：

// When ready...
window.addEventListener("load",function() {
    // Set a timeout...
    setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
    }, 0);
});

这是用于设置100％高度的jQuery：

// Set the height of the element
$('#selector').css('height', $(window).height());

    // Continuously set the height of the window when screen resizes
    $(window).resize(function() {
        var theHeight = $(window).height();
        $('#selector').css('height', theHeight);
});

希望这有用！

PS - 该代码需要在$（document）.ready（function（）{...}）中;

哦，还有..重要的是要注意，如果你一直滚动到顶部，它将使地址栏再次显示，并暂时按下100％高度的东西。 我还没有找到解决方法，但它适用于我需要它。