安卓平板电脑-Chrome浏览器/本地浏览器:地址栏和固定高度(100%)问题

Question

我正试图解决一个高度问题。

我有一个固定的全屏容器，它的高度是100%。

但是我有一些问题。

当我打开Chrome或Native Android浏览器时，高度会与地址栏一起计算出来。然后我可以再向下滚动60个像素左右（即使容器有溢出：隐藏）。一旦我有了地址栏就隐藏起来，并计算出正确的高度。

这种转变看起来很糟糕。

我读过许多涉及以下内容的解决方案：

window.scrollTo(0, 1)

这不起作用。我这样试过：

document.getElementById('fullscreen').scrollTo(0, 1);

这也不起作用。

我在一个开放函数中调用它。

单击按钮时会显示全屏元素。单击按钮后，将启动打开功能。

我也尝试过在scrollTo中添加setTimeout，但这并没有改变任何内容。

对此有什么充分的解决方案吗？我对CSS或JS修复持开放态度。

代码示例

<style type="text/css">
  #fullscreen { 
    background: #000;
    display: none;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5;
</style>
<a id="open" href="#">Open</a>
<div id="fullscreen"></div>
<script type="text/javascript">
   var open;
   open = function () {
     'use strict';
     var fullscreen = document.getElementById('fullscreen');
     fullscreen.setAttribute('style', 'display: block');
     setTimeout(function () { 
       fullscreen.scrollTo(0, 1);
     }, 100);
   };
   $sd('#open').on('click', function () {
      'use strict';
      open();
      return false;
   });
</script>

干杯

Answer 1

。。。试试这个：

#fullscreen {
  top:0;
  bottom:0;
}