100vh в мобильной верстке. Багфикс

Многие разработчики заметили, что WebKit при задании свойства для элемента 100vh как-то странно игнорирует нижнюю часть окна, фактически не выполняя условия. В итоге часть сайта становится скрытой, тем самым обесценивая полностью данное свойство. Одни предлагают не использовать 100vh, другие предлагают править с помощью media запросов. Недавно, данная ошибка была подана как баг, на рассмотрение разработчикам WebKit.

Ну и результат не заставил себя долго ждать - Matt Smith @AllThingsSmitty предложил использовать следующий багфикс для webkit:


body {
    display: flex; 
    flex-direction: column;
    margin: 0;
    min-height: 100vh;
    /* mobile viewport bug fix */
    min-height: -webkit-fill-available;
    }   

И о чудо! Все заработало. Обратите внимание! Что данный баг проявляется на мобильных устройствам, а в инструментах веб разработчика, chrome и иже с ними показывают все корректно. Итак, полная верстка:

HTML



    <header>HEADER GOES HERE</header>
    <main>MAIN GOES HERE</main>
    <footer>FOOTER GOES HERE</footer>

CSS


body {
    display: flex; 
    flex-direction: column;
    margin: 0;
    min-height: 100vh;
    /* mobile viewport bug fix */
    min-height: -webkit-fill-available;
    }
    
    main {
    flex: 1;
    }

Сравните результат до и после bugfix.

Просто применение 100vh

Как всегда можно попробовать на codepen:

See the Pen 100vh by Alex (@Asmodey) on CodePen.

Если хотите изучить JS - то курс JS 2.0 с домашними заданиями, для вас!

Еще статьи

Следи за новостями курсов на нашем канале

Открыть

Правила оформления домашних заданий

Открыть

Форум по задачам

Forum