移动端设置100vh仍出现垂直滚动条问题求助

问题出在html和body元素未设置满高及隐藏溢出，仅给容器设置height:100vh和overflow:hidden不足以覆盖浏览器默认的文档流行为。

修改CSS，添加对html和body的样式声明：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
}

.App {
    background-image: url("https://images.unsplash.com/photo-1532581140115-3e355d1ed1de?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    overflow: hidden;
}

h1 {
    color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0.637);
    font-size: 3rem;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
}

原理说明 #

• 浏览器默认情况下，html和body元素的高度不会自动占满整个视口，需显式设置height:100%来继承视口高度。
• 给html和body添加overflow:hidden可彻底禁用文档级别的滚动，避免容器外的滚动触发。

内容的提问来源于stack exchange，提问作者Coder apprentice