移动设备上的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% 高度的内容向下推。我还没有找到解决方法，但它满足了我的需要。