Тег Height в CSS: Пояснення та Приклади
Тег <img> встановлює висоту блокових або замінюваних елементів. Висота не включає товщину меж навколо елемента та значення відступів.
Якщо вміст блоку перевищує вказану висоту, то висота елемента залишиться незмінною, а вміст буде відображатися поверх нього. Це може призвести до накладання вмісту елементів один на одного. Щоб уникнути цього, додайте overflow: auto до стилю елемента.
Синтаксис
height: значення | відсотки | auto | inherit
Значення
В якості значень приймаються будь-які одиниці довжини, такі як пікселі (px), дюйми (in), пункти (pt) тощо. При використанні відсоткового запису висота елемента обчислюється в залежності від висоти батьківського елемента.
Приклад
<!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>Об'єктна модель
[window.]document.getElementById("elementID").style.height
Браузери
Браузер Internet Explorer 6 некоректно визначає height як min-height.
У режимі сумісності (quirk mode) Internet Explorer до версії 8.0 неправильно обчислює висоту елемента, не додаючи до неї значення відступів, полів та меж.
Internet Explorer до версії 7.0 не підтримує значення inherit.