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设置为实际视图减去所有其他底部和顶部条形图，使用window.screen.availHeight;或类似的东西？

Answer 1

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

* {
   border: 1px solid red;
}

发生了什么事？

这将为所有元素添加一个边框，您可以看到哪个元素从视口出来，如div或者标题标记或段落标记。

如何修复溢出？

打开检查元素悬停在所有元素上，通过添加width / height属性来做一些试验和错误。

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

当Body具有100vh时，不需要的ios滚动条

1 个答案: