Высота - CSS-хитрости

Anonim

heightСвойство в CSS определяет определяет высоту содержимого ящиков и принимает любое из значений длины.

Область «содержимого» определяется как заполнение и граница в дополнение к высоте / ширине или размеру самого содержимого.

Отрицательные значения вроде height: -100pxне принимаются. heightСвойство не применяется к незамещаемым встроенным элементам , включая таблицы столбцы и группы столбцов.

.wrap ( height: auto; /* auto keyword */ height: 120px; /* length values */ height: 10em; height: 0; /* unit-less length is OK for zero */ height: 75%; /* percentage value */ height: inherit; /* inherited value from parent element */ )
Посмотрите на эту ручку!

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

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

Высота также может использоваться как анимируемое свойство.

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

IE Край Fire Fox Хром Сафари Опера
Все Все Все Все Все Все
Android Chrome Android Firefox Браузер Android iOS Safari Opera Mobile
Все Все Все Все Все
Источник: caniuse

Связанные свойства

Альманах на 15 января 2021 г.

максимальная высота

.element ( max-height: 3rem; ) Сара Коуп