将高度设置为100vh将在小屏幕设备中显示垂直滚动条

Question

在我的角度应用程序中，我希望我的登录表单位于屏幕的中心。我应用了必要的CSS样式，并且在笔记本电脑和台式机（即中型和大型屏幕）上没有任何垂直滚动条的情况下，一切正常。当我在手机上查看表单时，出现垂直滚动条，并且表单未垂直居中，如下图所示。

登录html表单及其CSS文件为

login.component.html

<div id="divPage">
    <div class="wrapper">
      <!-- Content of the form -->
    </div>
</div>

login.component.scss

#divPage {
    background-color: #9caae2;
    vertical-align: middle;
    height: 100vh;
}

.wrapper {
    display: flex;
    align-items: center;
    flex-direction: column; 
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: 20px;
 }

以上登录组件是html和scss文件所在的根应用程序组件的一部分

app.component.html

<div class="app-wrapper">

<!-- Page Content -->
<div id="page-content">
    <div>
        <router-outlet>
            <!-- Login component shown here -->
        </router-outlet>
    </div>
</div>

app.component.scss

.app-wrapper {
   display: flex;
   width: 100%;
   align-items: stretch;
}

#page-content {
   width: 100%;
   padding: 0px;
   min-height: 100vh;
   transition: all 0.3s;
} 

我不希望垂直滚动条出现在小屏幕上。我尝试将#divPage中的vertical-align设置为中点，如对类似问题的一些回答中所述，但这对我不起作用。我不明白发生了什么。请帮我解决这个问题。

Answer 1

我猜你是在iPhone上，因为地址栏有一个错误，其中100hv大于屏幕。 显示地址栏时，页面实际上是100vh +地址栏大小。

有几种解决方案，以下是其中几种：https://medium.com/@susiekim9/how-to-compensate-for-the-ios-viewport-unit-bug-46e78d54af0d

我目前正在使用javascript方法来解决此问题，类似于：

window.onresize = function() {
    document.body.height = window.innerHeight;
}
window.onresize(); // called to initially set the height.

不太好，但是确实可以。

Answer 2

您可以尝试以下方法：

.example-content {
    min-height: calc(100vh - Xrem); //X to be set accordingly.
}

您可以在其中尝试在开发工具中设置此'X'，直到滚动消失。据我说，这对所有设备都适用。

Answer 3

此处从vh更改为%

#page-content {
   width: 100%;
   padding: 0px;
   min-height: 100%;
   transition: all 0.3s;
}