Question

我想要一个40px，100％高度的元素固定在我的响应式网站的左侧，显然我需要它始终是100％并且它在桌面浏览器上运行良好。

当我使用移动浏览器（nexus 7，Chrome）时会出现问题。将手指按在屏幕上，100％的高度似乎会下降约10％，直到你放开并且元素再次变为100％。

滚动时会出现一个网址栏，然后会消失，我相信它会偏移100％的高度。

所以问题似乎是Chrome的网址栏，可能还有其他移动浏览器网址栏以同样的方式运作，我该如何解决这个问题？

这是CSS：

div#dummyMenu{
width:40px; 
position:fixed; 
top:0; 
bottom:0; 
left:0; 
background-color:#444;
}

我甚至投入了一些 jQuery 来加倍确定但仍然存在同样的问题：

jQuery(document).on("scroll",function(){
    var documentHeight = jQuery(document).height();
    jQuery('#dummyMenu').css('height',documentHeight);
});

Answer 1

更改

var documentHeight = $(document).height();

到

var documentHeight = $(window).innerHeight();

window.innerHeight()从网络浏览器（bars）返回窗口的高度，而不是viewport等。

但是，由于滚动条干扰，我认为您应该尝试使用$(window).height。

另外，请确保在HTML的开头包含<!DOCTYPE html>。

我也认为问题可能是您说jQuery而不是$。

Answer 2

移动浏览器不支持固定位置，因此您将被迫使用相对或绝对值。

请查看本文here以了解更多内容......

Answer 3

我在网站包装器之后移动了我的元素并将其设为position:absolute;而不是固定。

不太确定为什么修复它但它确实......

div#dummyMenu{
width:40px; 
position:absolute; 
left:0; 
background-color:#444; 
z-index:100; 
height:100%;
}

我还在评论部分的帮助下添加了一些jQuery。

jQuery(document).ready(function($){
    $(window).on("load",function(){ 
        var windowHeight = $(document).height();
        $('#dummyMenu').css('height',windowHeight + 'px');
    });
});

jQuery(document).ready(function($){
    $(window).scroll(function(){
        var windowHeight = $(document).height();
        $('#dummyMenu').css('height',windowHeight + 'px');
    });
});

固定位置，100％高度元素，在移动设备上并非总是100％

3 个答案: