Body 有 100vh 时不需要的 ios 滚动条答案

【问题标题】：Unwanted ios Scrollbar when Body has 100vhBody 有 100vh 时不需要的 ios 滚动条
【发布时间】：2017-09-17 07:05:42
【问题描述】：

我有一个很棒的脚本。这是一个 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 设置为实际视图减去所有其他底部和顶部栏，使用window.screen.availHeight; 或类似的东西？

【问题讨论】：

请创建一个最小、完整和可验证的示例stackoverflow.com/help/mcve
请看我的最新版本。
@Jonathan Safa 我的解决方案对你有用吗？
Rajendran，我已经知道问题出在哪里......它在身体里......就像我说的，如果我绝对评论页面上的所有内容，那么问题仍然存在......那里不是导致额外空间的 div 。是 iPhone 渲染的顶部和底部 nav。
哪个浏览器？苹果浏览器？可以放张图吗？

标签： html css

【解决方案1】：

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

* {
   border: 1px solid red;
}

发生了什么事？

这将为所有元素添加一个边框，您可以看到哪个元素像 div 或标题标签或段落标签一样离开视口。

如何解决溢出问题？

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

希望这将帮助您解决问题。如果您需要提琴手，请告诉我，我会添加一个示例。

【讨论】：