时间戳

首页 > 解决方案 > 隐藏地址栏时，Android Chrome 会在页面底部添加额外空间

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

问题描述

我有以下 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，点击时会调整其大小

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

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

我只在 Android Chrome 中注意到了这种奇怪的行为（尚未在 Android 上测试过其他浏览器），并且我在多个 Android 设备上进行了测试，甚至 Android 模拟器也是如此。在 iOS 模拟器和桌面 Chrome 上测试时，问题不存在。

这两个屏幕截图展示了这个问题： 在此处输入图像描述 在此处输入图像描述

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

标签： javascriptandroidhtmlcss

解决方案

推荐阅读