Опис
max-height - встановлює максимальну висоту елемента. Значення висоти буде обчислюватися залежно від значень встановлених властивостей height, max-height та min-height.
Якщо значення висоти (height) більше значення max-height, то висота елемента приймається рівною значенню max-height.
Синтаксис
max-height: значення | відсотки | none | inherit
Значення
В якості значень приймаються пікселі (px), відсотки (%) та інші одиниці вимірювання, прийняті в CSS. Від'ємні значення не допускаються.
- none
- Скасовує дію цієї властивості.
- inherit
- Наслідує значення батька.
Приклад
Приклад
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>max-height</title>
<style>
.block {
overflow: auto; /* Полоса прокрутки при необхідності */
padding: 10px; /* Поля навколо тексту */
max-height: 80px; /* Максимальна висота */
background: #ffe; /* Колір фону */
border: 1px solid #cb2027; /* Параметри рамки */
}
.block p {
margin: 2px auto; /* Відступи в абзаці */
}
</style>
</head>
<body>
<div class="block">
<p>Блокування елемента не дозволяє взагалі проводити з ним будь-які дії, включаючи виділення вмісту текстового поля, змінювати його або активізувати. Заблоковане поле зазвичай позначається сірим кольором</p>
<p>Деякі браузери дозволяють виділяти і копіювати вміст заблокованого текстового поля, але всі інші дії недоступні.</p>
</div>
</body>
</html>Результат цього прикладу показано на рис. 1.
Рис. 1. Результат використання властивості max-height
Об'єктна модель
[window.]document.getElementById("ідентифікаторЕлемента").style.maxHeight
Браузери
Internet Explorer до версії 7.0 включно не підтримує значення inherit.