Question

我有以下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>

1）名为sticky的元素是粘性页脚

2）名为test的元素是一个在点击

时调整大小的div

如果我加载页面，滚动直到隐藏地址栏，然后单击test div，元素会调整大小并在下面添加一个额外的空格（相当于地址栏的高度）粘性页脚。

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

我注意到这种奇怪的行为只出现在Android Chrome中（尚未在Android上测试其他浏览器），而且我在多个Android设备上进行了测试，甚至Android模拟器都做了同样的事情。在iOS模拟器和桌面Chrome上测试时，问题不存在。

这两个截图展示了这个问题：

这是Android Chrome中众所周知的错误还是预期的行为？这种令人讨厌的行为有解决方案吗？

隐藏地址栏时，Android Chrome会在页面底部添加额外空间

0 个答案: