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	Значение элемента наследуется от родительского элемента.