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

Question

查看此 link 以获取有关该问题的视频。真的不知道如何解释它：将 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;
}

Answer 1

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

Answer 2

我不太确定 css 申请了哪些 <body> 标签。

在响应式开发中使用header高度时最好设置min-height 属性，这样页面底部就没有白色-space

您可以使用：

min-height:100%

或

height: calc(100% - height of header)

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

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

White bar shows up after switching orientation from landscape to portrait (iPhone only)

html

css

iphone