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

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

Свойство max-height отменяет использование свойства height, а min-height отменяет свойство max-height.

Значение по умолчанию none
Применяется Ко всем элементам, кроме незаменяемых строчных элементов, колонок таблицы, групп колонок.
Наследуется Нет
Анимируемое Да. Высота анимируема.
Версия CSS2
DOM синтаксис object.style.maxHeight = "50px";

Синтаксис

max-height: none | length | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      max-height: 50px;
      overflow: auto;
      border: 1px solid #666;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства max-height</h2>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
  </body>
</html>

Рассмотрим другой пример, где максимальная высота равна "2cm":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .example1 {
      max-height: 2cm;
      overflow: auto;
      border: 1px solid #666;
      width:300px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства max-height</h2>
    <h3>Max-height: none;</h3>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>
    <h3>Max-height: 2cm;</h3>
    <p class="example1">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>
  </body>
</html>

Значения

Значение Описание
auto Устанавливает максимальную высоту. Значение по умолчанию.
length Устанавливает максимальную высоту в единицах измерения длины (px, pt, cm и т. д.). Значение по умолчанию - 0.
% Устанавливает максимальную высоту в процентах.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome edge firefox safari opera
18.0+ 12.0+ 1.0+ 1.0+ 7.0+

Практикуйте свои знания

Какие из следующих утверждений о CSS свойстве max-height верны?
Считаете ли это полезным?