为什么手机底部有多余的空间？答案

【问题标题】：Why is there an extra space at the bottom for mobile?为什么手机底部有多余的空间？
【发布时间】：2021-01-13 20:22:59
【问题描述】：

我有一个响应移动设备的网站。在大多数设备上它工作正常，但在 iPhone 11/11 pro 上，背景在页面底部可见。在做了一些研究之后，似乎 CSS 高度属性可能是一个问题。建议使用 VH 而不是 % 但在将 HTML BODY 更改为 100vh 后，它会将所有内容向下推（但底部不再显示背景）。见下文 - 红色是背景色，棕色是图像。

我的所有内容都适合屏幕。另外 - 如果我在横向旋转设备然后再旋转回来，那就完美了！

我认为这与这个“缺口”想法有关 - https://css-tricks.com/the-notch-and-css/

HTML

<body class="bkground">
<div class="main">
    <div class="wrapper">
        <div class="content" role="main">
            <div class="main-form-container">
                <form id="auth-form" method="post" class="centered">
                   <!-- Content here -->
                </form>
            </div>
            <div class="accept-connect-container">
                <form method="post" class="accept-form">
                   <!-- Content here -->
                </form>
            </div>
        </div>
    </div>
</div>

CSS

@media (min-height: 640px) and (max-height:699px) {
html body {
    height: 100%;
}
.wrapper {
    background-image: url('../img/desktop-background.jpg');
    background-repeat: no-repeat;
    -webkit-background-size: fill;
    -moz-background-size: fill;
    -o-background-size: fill;
    background-size: fill;
    background-position: center;
    background-color: #fff;
    margin: 0;
    padding: 0;
}
.main {
    height: 100%;
}
.content {
    width: 350px;
   }
}

编辑

现在可以使用以下 CSS，但不确定这是否是实际修复。它可能会破坏其他设备，但根据 Chrome 响应工具，它没有。很难说。

CSS - 将 BODY 和 MAIN 标记/类的高度从 % 更改为 VH

@media (min-height: 640px) and (max-height:699px) {
html body {
    height: 100vh;
}
.wrapper {
    background-image: url('../img/desktop-background.jpg');
    background-repeat: no-repeat;
    -webkit-background-size: fill;
    -moz-background-size: fill;
    -o-background-size: fill;
    background-size: fill;
    background-position: center;
    background-color: #fff;
    margin: 0;
    padding: 0;
}
.main {
    height: 100vh;
}
.content {
    width: 350px;
   }
}

【问题讨论】：

标签： html css ios iphone

【解决方案1】：

您已经修复了最小高度和最大高度。

将它们修复为 100% 或 100vh。它会起作用。

@media (max-height:100%) {
html body {
    height: 100vh;
}
.wrapper {
    background-image: url('../img/desktop-background.jpg');
    background-repeat: no-repeat;
    -webkit-background-size: fill;
    -moz-background-size: fill;
    -o-background-size: fill;
    background-size: fill;
    background-position: center;
    background-color: #fff;
    margin: 0;
    padding: 0;
}
.main {
    height: 100vh;
}
.content {
    width: 350px;
   }
}

【讨论】：