height

С | Chrome | Opera | Safari | Firefox
7.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.6 | 10.0 | 10.0 | 3.1 | 4.0 | 5.0 | 3.0 | 3.6 | 4.0
Помилка | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так

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

CSS | CSS1
Значення за умовчанням | auto
Наслідує | Ні
Застосовується | До блокових елементів
Аналог HTML | <table height=""><img height="">
Посилання на специфікацію | http://www.w 3.org/TR/CSS21/visudet.html#propdef - height

Опис

Встановлює висоту блокових або замінюваних елементів (до них, наприклад, відноситься тег <IMG>). Висота не включає товщину меж навколо елементу, значення відступів і полів.

Браузери по-різному реагують на налаштування висоти елементу. Якщо його вміст перевищує вказану висоту, то Internet Explorer і Opera проігнорують значення властивості height і автоматично підлаштують висоту під контент. Браузер Netscape (а також Mozilla і Firefox) залишить висоту елементу незмінній, а вміст відображатиметься поверх нього. Із-за цієї особливості може вийти накладення вмісту елементів один на одного, коли елементи в коді HTML вони йдуть послідовно. Щоб цього не сталося, можна додати overflow: auto до стилю елементу.

Синтаксис

height: значення | відсотки | auto | inherit

Значення

Як значення приймаються будь-які одиниці довжини, прийняті в CSS, - наприклад, піксели (px), дюйми (in), пункти (pt) та ін. При використанні процентного запису висота елементу обчислюється залежно від висоти батьківського елементу. Якщо батько явно не вказаний, то в його якості виступає вікно браузеру. auto встановлює висоту виходячи з утримуваного елементу

Приклад

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.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>

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

Мал. 1. Застосування властивості height

Об'єктна модель

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

Браузери

Браузер Internet Explorer 6 некоректно визначає height як min - height. У режимі несумісності (quirk mode) Internet Explorer до версії 8.0 включно неправильно обчислює висоту елементу, не додаючи до неї значення відступів, полів і меж.

Internet Explorer до сьомої версії включно не підтримує значення inherit.