height

Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да

 

CSS CSS1
Значение по умолчанию auto
Наследуется Нет
Применяется К блочным элементам
Аналог HTML <table height=""> <img height="">

Описание

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

Браузеры по-разному реагируют на настройки высоты элемента. Если его содержимое превышает указанную высоту, то Internet Explorer и Opera проигнорируют значение свойства height и автоматически подстроят высоту под контент. Браузер Netscape (а также Mozilla и Firefox) оставит высоту элемента неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML они идут последовательно. Чтобы этого не произошло, можно добавить overflow: auto к стилю элемента.

Синтаксис

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

Значения

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

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>   <meta http-equiv="Content-Type" content="text/html;    charset=windows-1251">   <title>height</title>   <style type="text/css">    .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>

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

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

Браузеры

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

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