W3docs
ru
Войти

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

Используйте свойство CSS max-height для задания максимальной высоты области содержимого элемента. Примеры и описание значений.

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

Это полезно, когда содержимое имеет неизвестную или переменную длину — блок комментариев, выпадающая панель, окно чата, изображение или карточка — и вы хотите предотвратить влияние элемента на остальную часть макета. Используйте max-height совместно со свойством overflow, чтобы содержимое, превышающее лимит, прокручивалось, а не выходило за пределы блока.

На этой странице рассматриваются синтаксис, все допустимые значения, взаимодействие max-height с min-height и height, а также типичные практические сценарии.

Как разрешается max-height

Когда применяется несколько свойств, связанных с высотой, браузер разрешает их в фиксированном порядке приоритета:

min-height имеет приоритет над max-height который имеет приоритет над height

Иными словами, если задать height: 100px; max-height: 50px, элемент отобразится высотой 50px (max побеждает). Но если также задать min-height: 80px, элемент отобразится высотой 80px (min побеждает над max). Этот порядок важен при коллизии нескольких правил — min-height всегда имеет последнее слово.

Особенность процентных значений: процентное значение max-height вычисляется относительно высоты содержащего блока. Если у родителя нет явно заданной высоты (его высота равна auto), проценту не на что опираться и max-height ведёт себя как none.

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

Синтаксис

Синтаксис свойства CSS max-height

max-height: none | length | percentage | calc() | max-content | min-content | fit-content | initial | inherit;

Пример с фиксированным значением в px

В приведённом ниже примере абзац ограничен высотой 50px. Поскольку текст длиннее, overflow: auto добавляет полосу прокрутки, чтобы содержимое оставалось читаемым без нарушения макета.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        max-height: 50px;
        overflow: auto;
        border: 1px solid #666;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Max-height property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </body>
</html>
Попробуйте сами »

Пример со значением в cm

Здесь у первого абзаца нет ограничения (max-height: none), а второй ограничен значением 2cm. Это наглядно демонстрирует, как одно и то же содержимое ведёт себя с ограничением и без него.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example1 {
        max-height: 2cm;
        overflow: auto;
        border: 1px solid #666;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Max-height property example</h2>
    <h3>Max-height: none;</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    <h3>Max-height: 2cm;</h3>
    <p class="example1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </body>
</html>
Попробуйте сами »

Пример с процентными значениями и calc()

Оба блока ниже имеют явно заданную height, поэтому процентные значения и calc() имеют базу для вычисления. Первый ограничен половиной собственной высоты; второй использует calc(), оставляя отступ в 50px ниже ограничения.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .percent-example {
        max-height: 50%;
        overflow: auto;
        border: 1px solid #666;
        height: 200px;
      }
      .calc-example {
        max-height: calc(100% - 50px);
        overflow: auto;
        border: 1px solid #666;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Max-height property example</h2>
    <h3>Max-height: 50%;</h3>
    <p class="percent-example">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    <h3>Max-height: calc(100% - 50px);</h3>
    <p class="calc-example">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </body>
</html>
Попробуйте сами »

Значения

ЗначениеОписаниеПример
noneЗначение по умолчанию. Максимальная высота не задана.Пример »
lengthЗадаёт фиксированную максимальную высоту в px, pt, cm и т.д.Пример »
percentageЗадаёт максимальную высоту как процент от высоты содержащего блока.Пример »
calc()Вычисляет максимальную высоту с помощью выражения.Пример »
max-contentЗадаёт максимальную высоту равной внутреннему максимальному размеру содержимого.Пример »
min-contentЗадаёт максимальную высоту равной внутреннему минимальному размеру содержимого.Пример »
fit-contentЗадаёт максимальную высоту по размеру содержимого.Пример »
initialУстанавливает свойство в значение по умолчанию.Пример »
inheritНаследует свойство от родительского элемента.Пример »

Типичные случаи применения

  • Прокручиваемые панели. Выпадающий список, боковая панель или журнал чата, которые не должны превышать высоту viewport: задайте max-height вместе с overflow-y: auto.
  • Адаптивные изображения. img { max-height: 80vh; } предотвращает выход высокого изображения за пределы экрана, при этом оно масштабируется на маленьких viewport.
  • Сворачиваемые блоки / «читать далее». Анимируйте max-height от небольшого значения к большему, чтобы плавно раскрыть скрытое содержимое с помощью CSS-перехода (анимация max-height работает там, где анимация height: auto невозможна).
  • Единообразные карточки. Ограничение max-height для тела карточек не позволяет одной плитке в сетке стать несоразмерно большой.

Советы и особенности

  • max-height устанавливает только верхний предел — он не принуждает элемент быть такой высоты. Для этого используйте height или min-height.
  • Без свойства overflow содержимое, превышающее max-height, просто выйдет за пределы блока. Добавьте overflow: auto (прокрутка) или overflow: hidden (обрезка) для управления им.
  • Процентное значение max-height требует, чтобы у родителя была вычисленная высота, иначе оно игнорируется.
  • Помните, что border и padding учитываются в размерах блока, если не задано box-sizing; по умолчанию content-box измеряет max-height только относительно области содержимого.
  • Существует аналогичное свойство для ширины: см. max-width.

Практика

Практика
Какова функция свойства 'max-height' в CSS?
Какова функция свойства 'max-height' в CSS?
Was this page helpful?