Свойство высоты CSS
Пример
Установите высоту двух элементов <div>:
div.a {
height: auto;
border:
1px solid black;
}
div.b {
height: 50px;
border: 1px solid black;
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство height
устанавливает высоту элемента.
Высота элемента не включает отступы, границы или поля!
Если height: auto;
элемент будет автоматически регулировать свою высоту, чтобы его содержимое отображалось правильно.
Если height
установлено числовое значение (например, пиксели, (r) em, проценты), то, если содержимое не помещается в пределах указанной высоты, оно будет переполнено. Как контейнер будет обрабатывать переполненное содержимое, определяется
свойством переполнения .
Примечание. Свойства min-height и
max-height переопределяют
height
свойство.
Значение по умолчанию: | авто |
---|---|
Унаследовано: | нет |
Анимация: | да. Читать об анимации |
Версия: | CSS1 |
Синтаксис JavaScript: | объект .style.height="500px" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Property | |||||
---|---|---|---|---|---|
height | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
Синтаксис CSS
height: auto|length|initial|inherit;
Значения свойств
Value | Description | Play it |
---|---|---|
auto | The browser calculates the height. This is default | |
length | Defines the height in px, cm, etc. Read about length units | |
% | Defines the height in percent of the containing block | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Дополнительные примеры
Пример
Установите высоту элемента на 50% от высоты родительского элемента:
#parent {
height: 100px;
}
#child {
height: 50%;
}
Связанные страницы
Учебник CSS: высота и ширина CSS
Учебное пособие по CSS: блочная модель CSS
Справочник по CSS: свойство ширины
Справочник по HTML DOM: свойство высоты