height

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	3.1+	1.0+	1.0+	1.0+

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

Значение по умолчанию	auto
Наследуется	Нет
Применяется	К блочным и заменяемым элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/visudet.html#propdef-height

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3
			+

Описание

Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег <img>). Высота не включает толщину границ вокруг элемента, значение отступов и полей.

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

Синтаксис

height: значение | проценты | auto | inherit

Значения

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

Пример

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title> height </title>

<style>

.layer {

height: 50px;/* Высота блока */

width: 150px;/* Ширина блока */

overflow: scroll;/* Добавляем полосы прокрутки */

background: #fc0;/* Цвет фона */

padding: 7px;/* Внутренние отступы текста */

border: 1px solid #333;/* Параметры рамки */

}

</style>

</head>

<body>

<div class="layer">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit,

sed diem nonummy nibh euismod tincidunt ut lacreet

dolore magna aliguam erat volutpat.

</div>

</body>

</html>

Результат данного примера показан на рис. 1

Рис. 1. Применение свойства height

Объектная модель

[window.]document.getElementById("elementID").style.height

Браузеры

Браузер Internet Explorer 6 некорректно определяет height как min-height.

В режиме совместимости (quirk mode) Internet Explorer до версии 8.0 включительно неправильно вычисляет высоту элемента, не добавляя к ней значение отступов, полей и границ.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Категория: Размер