相关疑难解决方法(0)

我有一个非常奇怪的问题...在每个浏览器和移动版本中我遇到这种行为:

• 加载页面时所有浏览器都有一个顶级菜单(例如显示地址栏),当您开始滚动页面时,该菜单会向上滑动.
• 100vh仅在视口的可见部分计算,因此当浏览器栏向上滑动100vh时增加(以像素为单位)
• 所有布局都重新绘制并重新调整,因为尺寸已更改
• 对用户体验的糟糕跳跃效果

怎么能避免这个问题？当我第一次听到视口高度时,我很兴奋,我认为我可以将它用于固定高度块而不是使用javascript,但现在我认为唯一的方法是实际上javascript与一些resize事件......

您可以在以下位置查看问题:示例站点

任何人都可以帮我/建议一个CSS解决方案吗？

简单的测试代码:

/* maybe i can track the issue whe it occours... */
$(function(){
  var resized = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (++resized) $('#currenth').css('background:#00c');
  })
  .resize();
})

*{ margin:0; padding:0; }

/*
  this is the box which should keep constant the height...
  min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
  min-height:100vh;
  position:relative;
}

.vhbox .t{
  display:table;
  position:relative;
  width:100%;
  height:100vh;
}

.vhbox .c{ …

无论其内容如何.

是否有可能做到这一点？

我目前正在开发一个水平布局的网站.所有元素都是位置:绝对的javascript.它们的大小是用window.innerHeight计算的.我的问题是,尽管元素不高于窗口的高度,我可以向下滚动(地址栏的高度).这在两个方面很烦人.首先它触发了当时我既不想要也不需要的window-resize事件.第二,它与一些内容应该可以垂直滚动的内容盒不能很好地配合.有时我可以滚动框,但有时整个页面会先滚动(如前所述:地址栏的高度).有没有任何解决方案可以阻止我在所有设备上使用这种地址栏自动隐藏机制.

预先感谢!

这根本不可滚动:http://maxeffenberger.de/test.html

这可以水平滚动(有意义地看到隐藏的内容)但也是垂直滚动直到隐藏地址栏(没有意义,因为没有额外的"垂直"内容需要更多空间:http://maxeffenberger.de/test2 html的