Как использовать CSS для установки высоты элемента HTML на 100%

Узнайте, как установка высоты в процентах работает в CSS

• Делиться
• флипборд
• Эл. адрес

• Калифорнийский университет
• Вашингтонский университет

Дженнифер Кирнин — профессиональный веб-разработчик, помогающий другим в изучении веб-дизайна, HTML, CSS и XML.

• Колледж Святой Марии-оф-Вудс

Джессика Кормос — писатель и редактор с 15-летним опытом написания статей, копий и UX-контента для Tecca.com, Rosenfeld Media и многих других.

Процентные значения в CSS могут быть сложными.Когда вы устанавливаете свойство CSS высоты элемента на 100%, что именно вы устанавливаете на 100%? Это основной вопрос, с которым вы сталкиваетесь при работе с процентами в CSS, и по мере того, как макеты становятся более сложными, становится все труднее отслеживать проценты, что приводит к совершенно странному поведению, если вы не будете осторожны.

Работа с процентами имеет явное преимущество; макеты на основе процентов автоматически адаптируются к разным размерам экрана. Вот почему использование процентов так важно в адаптивном дизайне. Популярные системы сеток и CSS-фреймворки используют процентные значения для создания адаптивных сеток.

Ясно, что есть определенные ситуации, которые лучше подходят для статических значений, и другие, которые гораздо лучше работают с чем-то адаптивным, например, с процентами. Вам нужно будет решить, какой маршрут выбрать с элементами вашего дизайна.

Статические единицы

Пиксели статичны. Десять пикселей на одном устройстве — это десять пикселей на каждом устройстве. Конечно, есть такие вещи, как плотность и то, как устройство на самом деле интерпретирует пиксель, но вы никогда не увидите серьезных изменений, потому что экран другого размера.

С помощью CSS вы можете легко определить высоту элемента в пикселях, и она останется прежней. Это предсказуемо.

Это не изменится, если вы не измените его с помощью JavaScript или чего-то подобного.

Теперь есть и другая сторона этой медали. Это не изменится. Это означает, что вам нужно будет точно все измерить, и даже в этом случае ваш сайт не будет работать на всех устройствах. Вот почему статические единицы, как правило, лучше работают для дочерних элементов, мультимедиа и вещей, которые начинают искажаться и выглядеть странно, если растягиваются и увеличиваются.

Установка высоты элемента на 100%

Когда вы устанавливаете высоту элемента на 100%, распространяется ли он на всю высоту экрана? Иногда. CSS всегда обрабатывает процентные значения как процент от родительского элемента.

Без родительского элемента

Если вы создали обновление, которое содержится только в теге body вашего сайта, 100%, вероятно, будут соответствовать высоте экрана.Это если вы не определили значение высоты для .

HTML:

CSS:

Высота этого элемента будет равна высоте экрана. По умолчанию он охватывает весь экран, так что это основа, которую ваш браузер использует при вычислении высоты элемента.

С родительским элементом со статической высотой

Когда ваш элемент вложен в другой элемент, браузер будет использовать высоту родительского элемента для расчета значения для 100%. Итак, если ваш элемент находится внутри другого элемента высотой 100 пикселей, и вы установили высоту дочернего элемента на 100%. Дочерний элемент будет иметь высоту 100 пикселей.

HTML:

CSS:

Высота, доступная дочернему элементу, ограничена высотой родительского элемента.

С родительским элементом с процентной высотой

Это может показаться нелогичным, но вы можете установить высоту элемента в процентах от процентов. Когда у элемента есть родительский элемент, высота которого также определена как процентное значение, браузер будет использовать то же значение, что и родительский элемент, который уже рассчитан на основе его родительского элемента. Это потому, что 100% значения по-прежнему остается этим значением.

CSS:

В этом случае высота родительского элемента составляет 75% всего экрана. Таким образом, ребенок также составляет 100% доступного общего роста.

С родительским элементом без высоты

Интересно, что когда родительский элемент не имеет определенной высоты, браузер будет подниматься вверх уровень за уровнем, пока не найдет конкретное значение, с которым он сможет работать. Если он сделает это до конца, ничего не найдя, браузер по умолчанию будет использовать высоту экрана, давая вашему элементу эквивалентную высоту.

HTML:

CSS:

Дочерний элемент простирается до верхней и нижней части экрана.

Единицы области просмотра

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

Чтобы установить элемент высота равный высоте экрана, установите его значение высоты равным 100vh.

При этом легко сломать макет, и вам нужно знать, какие другие элементы будут затронуты, но область просмотра — это, безусловно, самый прямой способ установить высоту элемента на 100% экрана.