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

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

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

Синтаксис

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

css

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

Пример свойства max-height:

Пример использования свойства CSS max-height со значением px

html

<!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>

Try it Yourself »

Пример свойства max-height со значением "cm":

Пример использования свойства CSS max-height со значением cm

html

<!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>

Try it Yourself »

Пример свойства max-height со значениями в процентах и calc():

Пример использования свойства CSS max-height со значениями в процентах и calc()

html

<!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>

Try it Yourself »

Значения

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

Практика

Какова функция свойства 'max-height' в CSS?

Оно устанавливает максимальную высоту для элемента.Оно устанавливает минимальную высоту для элемента.Оно ограничивает ширину элемента.Оно гарантирует, что высота элемента не превышает определённое значение.Оно сбрасывает высоту элемента до 'auto'.

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

Синтаксис ​

Пример свойства max-height: ​

Пример свойства max-height со значением "cm": ​

Пример свойства max-height со значениями в процентах и calc(): ​

Значения ​

Практика ​

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

Синтаксис

Пример свойства max-height:

Пример свойства max-height со значением "cm":

Пример свойства max-height со значениями в процентах и calc():

Значения

Практика