max-height в CSS


Свойство CSS max-height

Описание и использование

Свойство CSS max-height задает максимально возможную высоту элемента.

Заметка: max-height (максимальная высота) элемента не включает поля (padding), рамки (border) или внешние отступы(margin) !

Значение по умолчанию нет
Наследование нет
Версия CSS CSS 2
Синтаксис JavaScript object.style.maxHeight=»10px»

Поддержка в браузерах

Свойство max-height поддерживается всеми основными браузерами.

Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit.

CSS Свойство max-height

Пример

Установить максимальную высоту параграфа:

p
<
max-height:50px;
>

Попробуйте сами »

Определение и Использование

Свойство max-height устанавливает максимальную высоту элемента.

Замечание: Свойство max-height не включает отступы, границы или поля!

Значение по умолчанию: none
Наследуется: нет
Версия: CSS2
JavaScript синтаксис: объект.style.maxHeight=»10px»

Поддержка Браузерами

Свойство max-height поддерживается всеми основными браузерами.

Замечание: Значение «inherit» поддерживается в IE8, если указано объявление типа документа !DOCTYPE. IE9 поддерживает «inherit».


Замечание: IE6 и более ранние версии не поддерживает свойство max-height.

max-height

Свойство CSS max-height используется для ограничения максимальной высоты элементов. Оно указывается, когда необходимо, чтобы высота варьировалась в зависимости от содержимого, но не превышала определенный размер. Часто в паре с max-height применяется свойство min-height, чтобы ограничить и минимальную высоту элемента.

Иногда может случиться так, что содержимое не сможет вместиться в заданные или вычисленные размеры. Тогда оно будет размещено поверх элемента и его окружения. В таких случаях поможет свойство overflow.

Во избежание «конфликта» размеров, при вычислении итоговой высоты браузеры используют определенный алгоритм расчетов:

Вычисление высоты элементов

Соотношение первичных значений Итоговая высота
Если height > max-height max-height
Если min-height max-height max-height
Если height height > max-height min-height
Если min-height > height » означает «больше», а « Вычисление размеров замещаемых элементов
Соотношение первичных значений Итоговая ширина Итоговая высота
Если width > max-width, где (max-width * height/width) max-width
Если (width > max-width) и (height > max-height), где (max-width/width ≤ max-height/height) и (min-height > max-width * height/width)
Если (width max-width) и (height max-height min-width max-height
Если height > max-height, где (max-height * width/height) max-width) и (height > max-height), где (max-width/width > max-height/height) и (min-width > max-height * width/height)
Если (width min-height/height) и (max-height max-height)
Если width > max-width, где (max-width * height/width) > min-height max-width max-width * height/width
Если (width > max-width) и (height > max-height), где (max-width/width ≤ max-height/height) и (min-height min-height/height) и (max-height > min-width * height/width)
Если height > max-height, где (max-height * width/height) > min-width max-height * width/height max-height
Если (width > max-width) и (height > max-height), где (max-width/width > max-height/height) и (min-width min-height * width/height)

Тип свойства

Применяется: ко всем элементам, кроме незамещаемых встроенных (inline) элементов ( , , и т.д.), тегов и и элементов с display: table-column и table-column-group.

Значения

Значением свойства max-height является указание максимальной высоты элемента одним из следующих способов.

  • Размер — относительные или абсолютные величины в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Отрицательные значения недопустимы.
  • Проценты — значения в процентах (%), где за 100% берется высота элемента-предка по следующему алгоритму:
    1. Для непозиционируемых и относительно позиционируемых элементов (position: static или relative ) максимальная высота считается относительно высоты ближайшего блочного (block) элемента-предка, встроенного блока (inline-block) или ячейки таблицы, а если таких нет, то относительно тела документа ( ).
    2. Максимальная процентная высота самого тела документа считается относительно высоты корневого элемента ( ).
    3. Максимальная высота корневого элемента считается относительно высоты окна браузера.
    4. Для элементов с position: fixed максимальная высота считается относительно высоты окна браузера.
    5. Для элементов с position: absolute максимальная высота считается относительно высоты элемента, от которого идет позиционирование, причем с учетом его внутренних отступов (padding), а если такого элемента нет, то относительно окна браузера.

    Отрицательные процентные значения (-20%) указывать нельзя. Кроме этого, если элемент-предок, от которого идет расчет, не является абсолютно позиционированным и его высота не указана явно, то процентное значение не будет работать, то есть оно станет равным none .

  • none — отсутствие ограничения максимальной высоты.
  • inherit — наследует значение max-height от родительского элемента.

Процентная запись: относительно высоты элемента-предка или окна браузера.

Значение по умолчанию: none.

Синтаксис

Пример CSS: использование max-height

Результат. Использование свойства CSS max-height.

max-height

Браузер Internet Explorer Netтscape Опера Safari Mozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Да Да


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

CSS (ЦСС) CSS (ЦСС)2
Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам, кроме встроенных и таблиц
Аналог ШТМЛ Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visudet.ШТМЛ#min-max-heights

Описание

Устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных параметров height , max-height и min-height . В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных свойств.

Табл. 1. Высота элемента

Значения параметров Ширина
min-width max-height max-height
min-height > height > max-height min-height
min-height > height height ) больше значения max-height , то высота элемента принимается равной значению max-height .

Синтаксис

max-height: значение | none

Аргументы

В качестве значений принимаются пикселы (px) и проценты (%). Значение none убирает все ограничения на высоту.

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

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

Рис. 1. Результат использования свойства max-height

max-height

Поддержка браузеров

IE Opera Chrome Firefox Safari
IE7.0+; IE 7.0 не поддерживает значение inherit + + + +

Пример

Задаем максимальную высоту элемента:

Описание и использование

Свойство max-height определяет максимальную высоту элемента.


Примечание: свойство max-height не включает в себя отступы, поля и границы.

CSS max-height Property

The max-height property sets the maximum height of an element. This property prevents the height property’s value from becoming larger than the value specified for max-height .

The max-height property overr >height property, and min-height property overr >max-height property.

Initial Value none
Applies to All elements, but non-replaced inline elements, table columns, and column groups.
Inherited No.
Animatable Yes. Height is animatable.
Version CSS2
DOM Syntax object.style.maxHeight = «50px»;

Syntax

Example

Another example where the maximum height is defined as «2cm»:

CSS: max-height property

This CSS tutorial explains how to use the CSS property called max-height with syntax and examples.

Description

The CSS max-height property defines the maximum height of the content area of an element.

Syntax

The syntax for the max-height CSS property is:

Parameters or Arguments

The max-height of the content area of an element. It can be one of the following:

Value Description
fixed Fixed value expressed in pixels, em’s, etc.
div < max-height: 50px; >
div
percentage Percentage value
div
none No maximum height is applied to the element
div
inherit Indicates that the element will inherit the max-height from its parent element
div
  • The content area of an element is inside the padding, border, and margin of the element.

  • The CSS max-height property applies to block level and replaced elements.
  • The CSS max-height property is used to prevent the CSS height from becoming larger than the value specified in the CSS max-height property.
  • When the value is provided as a percentage, it is relative to the height of the containing block.
  • See also height, width, max-width, min-height, min-width.

Browser Compatibility

The CSS max-height property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the max-height property below, exploring examples of how to use this property in CSS.

Using Fixed Value

Let’s look at how to provide the max-height as a fixed value expressed. First, we will express the max-height in pixels.

In this CSS max-height example, the height of the

We can also express the max-height as a fixed value in em’s.

In this max-height example, the height of the

Using Percentage

Let’s look at a CSS max-height example where we have provided the max-height as a percentage.

In this example, the height of the


Using none

Let’s look at a CSS max-height example where we have used none as the max-height value.

In this CSS max-height example, no maximum height is applied to the

Особенности свойства height в %

Обычно свойство height , указанное в процентах, означает высоту относительно внешнего блока.

Однако, всё не так просто. Интересно, что для произвольного блочного элемента height в процентах работать не будет!

Чтобы лучше понимать ситуацию, рассмотрим пример.

Пример

Наша цель – получить вёрстку такого вида:

При этом блок с левой стрелкой должен быть отдельным элементом внутри контейнера.

Это удобно для интеграции с JavaScript, чтобы отлавливать на нём клики мыши.

То есть, HTML-код требуется такой:

Как это реализовать? Подумайте перед тем, как читать дальше…

Придумали. Если да – продолжаем.

Есть разные варианты, но, возможно, вы решили сдвинуть .toggler влево, при помощи float:left (тем более что он фиксированной ширины) и увеличить до height: 100% , чтобы он занял всё пространство по вертикали.

Вы ещё не видите подвох? Смотрим внимательно, что будет происходить с height: 100% …

Демо height:100% + float:left

А теперь – посмотрим этот вариант в действии:

Как видно, блок со стрелкой вообще исчез! Куда же он подевался?


Ответ нам даст спецификация CSS 2.1 пункт 10.5.

«Если высота внешнего блока вычисляется по содержимому, то высота в % не работает, и заменяется на height:auto . Кроме случая, когда у элемента стоит position:absolute .»

В нашем случае высота .container как раз определяется по содержимому, поэтому для .toggler проценты не действуют, а размер вычисляется как при height:auto .

Какая же она – эта автоматическая высота? Вспоминаем, что обычно размеры float определяются по содержимому (10.3.5). А содержимого-то в .toggler нет, так что высота нулевая. Поэтому этот блок и не виден.

Если бы мы точно знали высоту внешнего блока и добавили её в CSS – это решило бы проблему.

CSS Свойство max-height

Пример

Установить максимальную высоту параграфа:

p
<
max-height:50px;
>

Попробуйте сами »

Определение и Использование

Свойство max-height устанавливает максимальную высоту элемента.

Замечание: Свойство max-height не включает отступы, границы или поля!

Значение по умолчанию: none
Наследуется: нет
Версия: CSS2
JavaScript синтаксис: объект.style.maxHeight=»10px»

Поддержка Браузерами

Свойство max-height поддерживается всеми основными браузерами.

Замечание: Значение «inherit» поддерживается в IE8, если указано объявление типа документа !DOCTYPE. IE9 поддерживает «inherit».

Замечание: IE6 и более ранние версии не поддерживает свойство max-height.

Свойство CSS max-height

Описание и использование

Свойство CSS max-height задает максимально возможную высоту элемента.

Заметка: max-height (максимальная высота) элемента не включает поля (padding), рамки (border) или внешние отступы(margin) !

Значение по умолчанию нет
Наследование нет
Версия CSS CSS 2
Синтаксис JavaScript object.style.maxHeight=»10px»

Поддержка в браузерах

Свойство max-height поддерживается всеми основными браузерами.

Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit.

Илон Маск рекомендует:  Что такое код getpixel
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL