max-height
|
Internet Explorer |
|
|
|
Netscape |
|
|
Opera |
|
|
|
Safari |
|
|
|
Firefox |
|
|
6.0 |
7.0 |
8.0 |
8.0 |
9.0 |
8.0 |
9.2 |
9.5 |
1.3 |
2.0 |
3.1 |
1.5 |
2.0 |
3.0 |
|||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Нет |
Частично |
Да |
|
Да |
|
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Краткая информация
CSS |
CSS2 |
|
none |
Значение по умолчанию |
|
|
Нет |
Наследуется |
|
|
Ко всем элементам, кроме встроенных и таблиц |
Применяется |
|
|
Нет |
Аналог HTML |
|
|
http://www.w3.org/TR/CSS21/visudet.html#min-max-heights |
Ссылка на спецификацию |
|
|
|
Описание
Устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от значений установленных свойств height, max-height и min-height. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевыхсвойств.
|
|
|
|
|
Табл. 1. Высота элемента |
|
|
|
|
|
|
Значения свойств |
|
|
|
|
Ширина |
min-width |
< |
height |
< |
max-height |
height |
|
|
height |
< |
max-height |
height |
|
|
height |
> |
max-height |
max-height |
min-height |
> |
height |
> |
max-height |
min-height |
min-height |
> |
height |
< |
max-height |
min-height |
Данные из таблицы следует понимать следующим образом. Если значение высоты (height) больше значения max-height, то высота элемента принимается равной значению max-height.
Синтаксис
max-height: значение | проценты | none | inherit
Значения
В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.
none |
Отменяет действие этого свойства. |
inherit |
Наследует значение родителя. |
Пример
HTML 4.01 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.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>max-height</title>
<style type="text/css">
.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("elementID").style.maxHeight
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
max-width
|
Internet Explorer |
|
|
|
Netscape |
|
|
Opera |
|
|
|
Safari |
|
|
|
Firefox |
|
|
6.0 |
7.0 |
8.0 |
8.0 |
9.0 |
8.0 |
9.2 |
9.5 |
1.3 |
2.0 |
3.1 |
1.5 |
2.0 |
3.0 |
|||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Нет |
Частично |
Да |
|
Да |
|
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Краткая информация
CSS |
CSS2 |
|
none |
Значение по умолчанию |
|
|
Нет |
Наследуется |
|
|
Ко всем элементам, кроме встроенных и таблиц |
Применяется |
|
|
Нет |
Аналог HTML |
|
|
http://www.w3.org/TR/CSS21/visudet.html#propdef-max- |
Ссылка на |
|
спецификацию |
width |
|
|
Описание
Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от значений установленных свойств width, max-width и min-width. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевыхсвойств.
|
|
|
|
|
Табл. 1. Ширина элемента |
|
|
|
|
|
|
Значения свойств |
|
|
|
|
Ширина |
min-width |
< |
width |
< |
max-width |
width |
|
|
width |
< |
max-width |
width |
|
|
width |
> |
max-width |
max-width |
min-width |
> |
width |
> |
max-width |
min-width |
min-width |
> |
width |
< |
max-width |
min-width |
Данные из таблицы следует понимать следующим образом. Если значение ширины (width) больше значения max-width, то ширина элемента принимается равной значению max-width.
Синтаксис
max-width: значение | проценты | none | inherit
Значения
В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.
none |
Отменяет действие этого свойства. |
inherit |
Наследует значение родителя. |
Пример
HTML 4.01 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.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Версия сайта для КПК</title>
<style type="text/css" media="handheld"> body {
max-width: 320px; /* Максимальная ширина страницы в пикселах */
}
</style>
</head>
<body>
<h1>Текст заголовка</h1> <p>Текст примера</p>
</body>
</html>
В данном примере ширина страницы ограничена размером 320 пикселов для всех наладонных устройств. К ним относятся КПК, смартфоны и другие устройства, способные отображать HTML-документы.
Объектная модель
[window.]document.getElementById("elementID").style.maxWidth
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.