Question

我正在努力解决身高问题。

我有一个固定的全屏容器，高度为100％。

但我遇到了一些问题。

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

这种转变看起来很糟糕。

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

window.scrollTo(0, 1)

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

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

这也不起作用。

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

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

我还尝试将一个setTimeout添加到scrollTo，但这不会改变任何内容。

这有什么全面的解决方案吗？我对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;
}

Android平板电脑 - Chrome /原生浏览器：地址栏和固定高度（100％）问题

1 个答案: