Белая полоса появляется после переключения ориентации с альбомной на портретную (только iPhone) - PullRequest
1 голос
/ 21 февраля 2020

Проверьте эту ссылку для видео проблемы. На самом деле не уверен, как еще это объяснить: после переключения 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;
}

Ответы [ 2 ]

3 голосов
/ 24 февраля 2020

Я почти уверен, что это связано с тем, как вы управляете высотой. Вы меняли его единицы? Хотя мне не нравится работать с vh, попробуйте изменить его на 100vh, чтобы увидеть, если что-то изменится, если это так, это означает, что вы перепутали его с единицами роста.

0 голосов
/ 27 февраля 2020

Я не очень уверен, что css было применено для тега <body>.

Желательно установить свойство min-height при использовании высоты для заголовков в адаптивной разработке, чтобы не было пробел доступен внизу страницы.

Вы можете использовать:

min-height:100%

или

height: calc(100% - height of header)

Если не хотите чтобы использовать %, используйте em вместо px.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...