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">
 Здесь Ваш текст. Здесь Ваш текст. Здесь Ваш текст. Здесь Ваш текст.
 Здесь Ваш текст. Здесь Ваш текст. Здесь Ваш текст. Здесь Ваш текст.
 Здесь Ваш текст. Здесь Ваш текст. Здесь Ваш текст. Здесь Ваш текст.
 Здесь Ваш текст. Здесь Ваш текст. Здесь Ваш текст. Здесь Ваш текст.
 </div> 
 </body>
</html>

Результат использования свойства height

Здесь Ваш текст. Здесь Ваш текст. Здесь Ваш текст. Здесь Ваш текст. Здесь Ваш текст. Здесь Ваш текст. Здесь Ваш текст. Здесь Ваш текст. Здесь Ваш текст. Здесь Ваш текст. Здесь Ваш текст. Здесь Ваш текст. Здесь Ваш текст. Здесь Ваш текст. Здесь Ваш текст. Здесь Ваш текст.

Пример 2

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство height</title>
<style type="text/css">
<!--
div {
height:200px;
overflow :auto;
border:10px dashed;
border-color:#0ba1d5;
outline-width:thick;
outline-style:dotted;
outline-color:red;
color: yellow;
font-size: 40px;
text-decoration:blink;
}
-->
</style>
</head>
<body>
<center>
<div>Высота блока 200 пикселей<br>+ значения границ<br>+ значения контура</div>
</center>
</body>
</html>

Результат примера.

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

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

Браузеры

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

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

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

Источники: http://htmlbook.ru/ и http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Размеры | Добавил: free20860soft (10.07.2013)

Просмотров: 609 | Теги: свойства CSS, Размеры | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]