Русские Блоги
CSS использует Calc (), чтобы получить текущий высота визуального экрана
Сначала понять единицу относительной длины CSS3 (ссылкаПодробный учебник) ：
Модуль относительной длины определяет атрибут длины относительно другой длины. Более применимо для разных устройств относительно длинных.
| em | Он описывает размер шрифта относительно текущего элемента, поэтому он также является относительной единицей длины. Как правило, размер шрифта браузера составляет 16px, затем 2em == 32px; |
| ex | В зависимости от высоты английских букв |
| ch | Число 0 ширина |
| rem | Размер шрифта корневого элемента (HTML) |
| vw | Ширина точки зрения, ширина окна, 1Вт = 1% ширины окна |
| vh | Высота точки зрения, высота окна, 1 VH = 1% от высоты окна |
| vmin | Меньший из VW и VH. |
| vmax | Чем больше в VW и VH. |
Видно, что vh / vw Мы можем получить ширину окна текущего экрана, поэтому в CSS, вычисляя эту высоту, высота DIV может быть приведена на высоту экрана. И рассчитать эту высоту можно использовать CSS3 calc() Функция (справочникПодробный учебник)：
Функция Calc () используется для динамического расчета значения длины.
- Следует отметить, что одно пространство должно быть сохранено до и после оператора, например: width: calc(100% — 10px) ；
- Функции Calc () могут быть рассчитаны с использованием любого значения длины;
- Функция Calc () поддерживает «+», «-«, »,« * »,« / »;
- Функция Calc () использует стандартные правила приоритета математической операции;
Так что просто настроить div высота height для calc(100vh) Это 100vh = 100% высоты окна, пример:
Следует отметить, что этот метод подходит для высоты веб, равной текущей высоте окна экрана, и все еще может понадобиться JS в соответствии с фактическими требованиями.
Спасибо на ваши часы, только для справки ~
Простой способ растянуть блок на всю высоту экрана, или 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 .
Поддержка браузерами
Довольно много браузеров поддерживают эти единицы измерения, что не может не радовать. С последними версиями Chrome, Safari, Opera и Firefox проблем нет. IE начиная с девятой версии имеет частичную поддержку. Проблема с мобильными браузерами: Opera Mini вообще не поддерживает эти единицы, Android Browser поддерживает их только с версии 4.4. Ознакомиться с подробной статистикой.