Javascript 当地址栏被隐藏时，Android Chrome会在页面底部增加额外的空间_Javascript_Android_Html_Css

Javascript 当地址栏被隐藏时，Android Chrome会在页面底部增加额外的空间

javascript android html css

Javascript 当地址栏被隐藏时，Android Chrome会在页面底部增加额外的空间,javascript,android,html,css,Javascript,Android,Html,Css,我有以下CSS代码： html { min-height: 100%; position: relative; } body { background-image: url("images/background.png"); background-repeat: repeat; margin: 0 0 64px; } #sticky { background-color: black; height: 44px; positio

我有以下CSS代码：

html {
    min-height: 100%;
    position: relative;
}

body {
    background-image: url("images/background.png");
    background-repeat: repeat;
    margin: 0 0 64px;
}

#sticky {
    background-color: black;
    height: 44px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0; 
}

#test {
    width:50%;
    height: 600px;
    margin:50px auto;
    background-color:white;
    border: 1px solid #000000;
}

以及以下HTML代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <meta charset="utf-8"/>
    <title>test</title>
    <script src="https://code.jquery.com/jquery-latest.min.js">
    <script>
    $(document).ready(function() {
         $(document).on('click', '#test', function() {
              $('#test').height('300px');
         });
    });
    </script>
</head>

<body>
     <div id="test">
          <table style="height:600px;"></table>
     </div>
     <div id="sticky"></div>
</body>
</html>


测试
$（文档）.ready（函数（）{
$（文档）。在（'单击'，'测试'，函数（）上）{
$（'测试'）。高度（'300px'）；
});
});

1）名为

sticky

的元素是粘性页脚

2）名为

test

的元素是一个div，单击可调整大小

如果我加载页面，滚动直到地址栏被隐藏，然后单击

test

div，元素的大小将被调整，并在粘性页脚下方添加一个额外的空间（相当于地址栏的高度）

向后滚动以显示地址栏会导致页面快速跳转，并删除多余的空间

我只在Android Chrome上注意到这种奇怪的行为（没有在Android上测试其他浏览器），我在多个Android设备上进行了测试，甚至Android emulator也做了同样的测试。当在iOS模拟器和桌面Chrome上测试时，问题并不存在

这两个屏幕截图说明了问题：

这是Android Chrome中的一个众所周知的错误，还是预期的行为？有没有解决这种恼人行为的方法？

使用任何css重置并尝试一下。试过了，但没用我的手机上没有这种行为。你能和我的样本页面核对一下吗：如果你也有它的话？