| 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 встановлює висоту виходячи з вмісту елемента
Приклад
HTML5 CSS2.1 IE Cr Op Sa Fx
<!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.
Об'єктна модель
[window.] Document.getElementById (" elementID "). Style. height
Браузери
Браузер Internet Explorer 6 некоректно визначає height як min-height .
В режимі сумісності (quirk mode) Internet Explorer до версії 8.0 включно неправильно обчислює висоту елемента, не додаючи до неї значення відступів, полів і меж.
Internet Explorer до версії 7.0 включно не підтримує значення inherit .