6

我可以肯定这个问题之前已经被问过，但我找不到任何非常相似的东西（有些问题有点相似）

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

问题是，视口大小会根据地址栏的可见性而变化。意思是，地址栏不可见时的 100% 高度大于可见时的大小。这会导致您在滚动时重新配置网站。这在移动 Google Chrome 上尤其成问题，因为无论您在页面中的哪个位置向上滚动，地址栏都会返回。许多生涩的重新配置。

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

非常感谢答案。

4

1 回答 1

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% 高度的东西暂时向下推。我还没有找到解决方法，但它可以满足我的需要。

于 2013-08-24T12:16:17.937 回答