将方向从横向切换到纵向后出现白条（仅限 iPhone）答案

【问题标题】：White bar shows up after switching orientation from landscape to portrait (iPhone only)将方向从横向切换到纵向后出现白条（仅限 iPhone）
【发布时间】：2020-02-21 19:41:12
【问题描述】：

查看此链接以获取有关该问题的视频。真的不知道如何解释它：将 iPhone 7 从横向切换到纵向后，屏幕底部会出现一个白条。有趣的是，白色条似乎与菜单栏大小相同。这是问题的屏幕记录：

http://mintrain.co.uk/whitebar.MP4

任何想法都会很棒！

HTML：

<div class="header">
    <div class="maxw">
        <img id="logo" src="images/whitelogo.svg">
        <div class="nav">
            <ul>
                <li>
                    <a href="index.html">HOME</a>
                </li>
                <li>
                    <a href="prices.html">PRICES</a>
                </li>
                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS：

.header {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px 0px;
    height: 60px;
    width: 100%;
    z-index: 10;
}

#logo {
    height: 60px;
    padding-left: 10px;
}

.nav {
    position: relative;
    float: right;
    height: 60px;
    top: 10px;
}

【问题讨论】：

我在 iPhone 7 的 chrome dev toll 上进行了检查，没有发现任何问题，请清除您的 iPhone 网络浏览器缓存，然后重试

标签： html css iphone

【解决方案1】：

我很确定这与您如何管理身高有关。你有没有改变它的单位？虽然我不喜欢使用 vh，但尝试将其更改为 100vh 以查看是否有变化，如果是，则表示您将其与身高单位弄乱了。

【讨论】：

你的意思是把.header的高度改成100vh？
我认为问题一定出在元素上。
@KenyiLarcher 您能否提供更多信息，说明这将如何影响 iOS 上的网站，以免其他人犯同样的错误
@viCky 当然，如果你设置一个身体高度的初始值，例如设置为 100%，它将使用当前可用空间计算它。所以，如果你有浏览器界面的某些部分，比如地址栏，你的高度将是“100% - 地址栏高度”，一旦地址栏消失，就像杰克上传的视频一样，高度将保持不变，但你将不再有地址栏，因此您将拥有与地址栏一样大的空白空间。视口单元确保它将更新高度值。 css-tricks.com/the-trick-to-viewport-units-on-mobile

【解决方案2】：

我不太清楚<body>标签申请了什么css。

在响应式开发中使用标题的高度时最好设置min-height属性，这样页面底部就没有可用的空白。

你可以使用：

min-height:100%

或

height: calc(100% - height of header)

如果不想使用%，请使用em 而不是px。

【讨论】：