Как поддержать vh и vw в старых браузерах, или как заменить vw/vh на 100%/auto?

Question

[Odinokun]

Доброго времени суток.
Есть страничка сайта которая состоит из одного единственного слайдера.
Слайдер растягивается на всю высоту и ширину в зависимости от разрешения экрана.
Размеры задавались через 100vh и 100vw.
В старых браузерах ниже чем firefox 18, Chrome 19, Opera 12, IE8, Safari 5 и т.п. эти единицы не поддерживаются.
Какой костыль можно использовать для хоть какой-то поддержки этих единиц в старых браузерах?

Или в крайнем случае как сделать так, что бы если эти единицы не поддерживаются, то ширина слайда становилась 100% вместо 100vw, а высота становилась "auto" вместо 100vh?

Answer 1

[Александр Петров]

Полифил это хорошо, но работает он весьма медленно, поэтому лучше стараться не полифилить такие вещи.
Для фоллбека до процентов можно использовать простую конструкцию:

width: 100%;
width: 100vw;
height: auto;
height: 100vh

Если браузер знает vw \ vh, то предыдущея строчка перекроется. Если не знает, будет использовать первую с процентами \ auto.

Comments

[Odinokun]

Супер.
Как я сам не додумался ))

[Odinokun]

Qlink, вот самый распространенный кейс использования vh в моей практике.
Есть лендинг, и задача сделать первый экран по высоте на всю высоту экрана.
Тут без vh будет печально.