height

Браузер	Internet Explorer				Netтscape		Опера				Safari			Mozilla Firefox
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

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

CSS (ЦСС)	CSS (ЦСС)1
Значение по умолчанию	auto
Наследуется	Нет
Применяется	Ко всем элементам, за исключением встроенных элементов, колонок и групп таблицы
Аналог ШТМЛ	<table height=""> <img height="">
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/visudet.ШТМЛ#propdef-height

Описание

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

Браузеры по-разному реагируют на настройки высоты элемента. Если его содержимое превышает указанную высоту, то Internet Эксплорер и Опера проигнорируют значение параметра height и автоматически подстроят высоту под контент. Браузер Нетscape (а также Mozilla и Файер фох) оставит высоту элемента нетронутой, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде ШТМЛ они идут последовательно. Чтобы этого не произошло, можно добавляем свойство overflow: auto к стилю элемента.

Синтаксис

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

Аргументы

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

Пример

ШТМЛ 4.01CSS (ЦСС) 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <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>

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

Рис. 1

Рис. 1. Применение параметра height

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

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