html - body 有 100vh 时不需要的 ios 滚动条

Question

我有一个很棒的剧本。这是一个CSS3动画。这是正文的 CSS...如果页面上没有其他内容，只有正文，移动设备上仍然会出现不需要的滚动条。我不想要 mobile1 上的滚动条 当我设置 body {height:90vh} 时它消失了，但它在浏览器上看起来像垃圾。

这是我的 CSS:

body  {
    -webkit-perspective: 600px;
    perspective: 600px;
    font-family: 'Lato',  Arial,  sans-serif;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    text-transform: uppercase;
    color: #333;
    font-size: 18px;
    letter-spacing: 2px;
    overflow: hidden !important;
     margin: 0 !important;
 }

基本上，有没有一种方法可以将 body height 设置为实际 View 的高度减去所有其他底部和顶部栏，使用 window.screen.availHeight; 或类似的东西？

Answer 1

有一个非常好的技巧可以找出导致溢出的元素。将这段代码放入您的样式表中。

* {
   border: 1px solid red;
}

这是怎么回事？

这将为所有元素添加边框，您可以看到哪个元素从视口(viewport)中移出，例如 div 或标题标签或段落标签。

如何修复溢出？

打开检查元素，将鼠标悬停在所有元素上，通过添加宽度/高度属性进行一些试验和错误。

希望这能帮助您解决问题。如果您需要 fiddler ，请告诉我，我会添加示例。