Height css что это

height

CSS атрибут height позволят обозначать высоту элемента. По умолчанию, свойство определяет высоту внутренней области. Если box-sizing имеет значение border-box , то свойство будет определять высоту области рамки.

Интерактивный пример

Атрибуты min-height и max-height при добавлении меняют значение height .

Синтаксис

/* Ключевые слова */ height: auto; /* значения */ height: 120px; height: 10em; /* значения */ height: 75%; /* Глобальные значения */ height: inherit; height: initial; height: unset; 

Значения

Высота — фиксированная величина.

Высота в процентах — размер относительно высоты родительского блока.

Браузер рассчитает и выберет высоту для указанного элемента.

Использует fill-available размер строки или fill-available размер блока, в зависимости от способа разметки.

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

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

Высота содержащего блока минус вертикальные margin , border и padding .

• внутренняя минимальная высота
• меньшая из внутренней предпочтительной высоты и доступной высоты

Формальный синтаксис

height =
auto | (en-US)
| (en-US)
min-content | (en-US)
max-content | (en-US)
fit-content( )

=
| (en-US)

Пример

HTML

div id="taller">Я 50 пикселей в высоту.div> div id="shorter">Я 25 пикселей в высоту.div> div id="parent"> div id="child">Моя высота - половина от высоты родителя.div> div> 

CSS

div  width: 250px; margin-bottom: 5px; border: 2px solid blue; > #taller  height: 50px; > #shorter  height: 25px; > #parent  height: 100px; > #child  height: 50%; width: 75%; > 

Результат

Проблемы доступности

Убедитесь, что элементы с height не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста.

• MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
• Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0

Спецификации

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

• Блочная модель, width , box-sizing , min-height , max-height

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

Width и height: определяем размеры элемента

Для того чтобы объекту можно было задать определенную ширину и высоту, в CSS существуют два свойства — width и height (соответственно). С их помощью вы можете устанавливать фиксированные размеры элементов, будь-то сайдбар, изображение, таблица или любой блок.

Особенности вычисления ширины и высоты

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

В качестве значения ширины можно использовать и единицу em , которая является примерно тем же, чем и размер шрифта текста, но только в условных единицах. К примеру, вы установили размер для шрифта 24px . Тогда 1em для этого элемента будет равен 24 пикселам, а если вы зададите width: 2em , то ширина составит 2×24px = 48 пикселов. Если размер шрифта не задан, он будет унаследован.

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

Что входит в ширину и высоту

Сразу стоит запомнить, что у свойств width и height есть особенность — они не включают в себя значения margin , padding и border . Значение, которое вы установите для width/height, будет означать лишь ширину/высоту области содержимого элемента.

Таким образом, для того чтобы вычислить, например, фактическую ширину элемента (место, которое он в действительности займет на экране), понадобится немного арифметики. Фактическая ширина — это сумма значений, таких как width , padding , border и margin . Напомним, что ранее мы рассматривали, как выглядит блочная модель CSS.

Для закрепления знаний покажем пример. Допустим, у вас есть элемент с таким стилем:

width: 200px; margin-left: 15px; margin-right: 15px; padding-left: 10px; border-left: 3px solid #333;

Для подсчета фактической ширины элемента выполним сложение:

width + margin-left + margin-right + padding-left + border-left = 200px + 15px + 15px + 10px + 3px = 243px (фактическая ширина)

Рекомендации по высоте

Свойство height может быть удобным, если надо точно контролировать, например, высоту изображения. Однако, если в контейнере будет содержаться текст или любой другой контент, у которого может варьироваться высота, крайне не рекомендуется устанавливать фиксированную высоту для контейнера, так как подобная верстка может привести к неожиданному результату — контент будет отображаться поверх другого содержимого.

Вместо фиксированной высоты использовать height: auto — эта запись означает, что высота объекта будет рассчитываться автоматически, в зависимости от содержимого, которое он содержит.

Другой способ избежать развала верстки — использовать запись overflow: auto . В таком случае, если высота содержимого будет превышать значение height своего контейнера, браузер добавит к контейнеру полосу прокрутки.

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

height

Устанавливает высоту содержимого элемента. По умолчанию высота определяется автоматически, исходя из содержимого элемента, но если задать фиксированное значение высоты, то она будет установлена, несмотря на объём содержимого. Если содержимое элемента превышает указанное значение высоты, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте свойство overflow со значением auto к стилю элемента.

Если для элемента свойство box-sizing задано как border-box , то height определяет высоту блока.

Краткая информация

Синтаксис

height: | | auto

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. При использовании процентной записи высота вычисляется в зависимости от значения height у родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. Если высота у родителя явно не определена, то применяется значение auto , оно устанавливает высоту исходя из содержимого элемента.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

div < height: >px; >

Пример

/* Ключевые слова */ max-height: none; max-height: max-content; max-height: min-content; max-height: fit-content; max-height: fill-available; /* Значения длины */ max-height: 3.5em; /* значения */ max-height: 75%; /* Глобальные значения */ max-height: inherit; max-height: initial; max-height: unset; 

table  max-height: 75%; > form  max-height: none; >