Простой способ растянуть блок на всю высоту экрана, или CSS3 Viewport Units


    В этой статье я познакомлю вас с появившимися в CSS3 единицами измерения vw, vh, vmin и vmax.

    Что такое «Viewport Units»


    Viewport Units — это относительные единицы измерения, рассчитывающиеся в процентах от размеров области просмотра браузера. Эти единицы измерения появились в третьей версии спецификации CSS.

    Единицы измерения vh и vw


    vh и vw можно расшифровать, как viewport height и viewport width — высота и ширина области просмотра соответственно. 1vh равен одному проценту от высоты области просмотра, 1vw равняется одному проценту от ширины области просмотра.

    Единицы измерения vmin и vmax


    vmin и vmax расшифровывается, как viewport minimal и viewport maximal. 1vmin сравнивает значения 1vh и 1vw, выбирая меньшее из них. 1vmax делает то же самое, но выбирает большее из двух значений. Иначе говоря, если у смартфона ширина экрана меньше высоты, то vmin будет рассчитываться относительно ширины, а vmax будет рассчитываться относительно высоты экрана.

    Пример использования


    Сейчас в тренде использование полноэкранных секций. Особенно часто их используют в лендингах. Есть много способов сделать такую секцию, однако самый простой и изящный способ — применить единицу измерения vh.

    section {
    	height: 100vh; /* высота секции равна высоте области просмотра */
    }
    

    Посмотрите демо.

    Поддержка браузерами


    Довольно много браузеров поддерживают эти единицы измерения, что не может не радовать. С последними версиями Chrome, Safari, Opera и Firefox проблем нет. IE начиная с девятой версии имеет частичную поддержку. Проблема с мобильными браузерами: Opera Mini вообще не поддерживает эти единицы, Android Browser поддерживает их только с версии 4.4. Ознакомиться с подробной статистикой.

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 14

      +13
      Капитан, капитан, улыбнитесь.
      –4
      Opera 12.17 не работает, по статистике LI за ноябрь — 3,5%, 4,5 млн.
      ИМХО повсеместно использовать пока рано.
        +14
        Ходьба по кругу — Мы (разработчки) не используем повсеместно потому что 4,5 млн., они (4,5 млн.) не обновляются потому что все в целом работает.
        • UFO just landed and posted this here
            +1
            Opera 12.17 (на presto) никогда не обновится. Следовательно они так и будут сидеть на ней «пока все нормально», как и сказал Piterski
              0
              Ага, так же 1% пользуется IE8.
              Ну чтож, давайте использовать CSS < 3 да и вообще останемся как в начале нулевых.

              Основная масса пользователей интернета (runet 76,9%) пользуются браузерами с поддержкой CSS3
              Opera < 22 и IE < 10 составляют в общем 5.2% пользователей.
              Остальные %, это мобильные.
              0
              По мне использование flexbox более практично с точки зрения решения реальных задач
                0
                Актуальную версию поддерживают лишь 76.33% браузеров, а полифиллов нет.

                Если писать CSS на трех разных версиях спецификации, то можно подтянуть уровень поддержки до 88.45%, что все равно слишком мало. Да и практичным этот неблагодарный труд ну никак не назовешь.
                • UFO just landed and posted this here
                • UFO just landed and posted this here
                  +6
                  На хабре об этом писали сто раз. И ваш обзор на статью не тянет.
                    –3
                    Неплохо бы ещё указать что это фактически перевод этой статьи.
                      –2
                      Круче только запатентовать

                      for (int I = 0; I < 100; I++)
                         // some code;
                      

                    Only users with full accounts can post comments. Log in, please.