--- title: max-height slug: Web/CSS/max-height translation_of: Web/CSS/max-height --- <div>{{CSSRef}}</div> <p>Свойство <a href="ru/docs/Web/CSS">CSS</a> <strong><code>max-height</code></strong> устанавливает максимальную высоту элемента. Оно предотвращает <a href="/ru/docs/Web/CSS/used_value">используемое значение</a> свойства {{ Cssxref("height") }} от становления больше, чем значение, указанное для <code>max-height</code>.</p> <div>{{EmbedInteractiveExample("pages/css/max-height.html")}}</div> <p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулреквест.</p> <p>{{ Cssxref("max-height") }} перекрывает {{cssxref("height")}}, но {{ Cssxref("min-height") }} перекрывает {{ Cssxref("max-height") }}.</p> <h2 id="Syntax">Синтаксис</h2> <pre class="brush:css no-line-numbers">/* <length> значения */ max-height: 3.5em; /* <percentage> значения */ max-height: 75%; /* Значения-ключевые слова */ max-height: none; max-height: max-content; max-height: min-content; max-height: fit-content; max-height: fill-available; /* Глобальные значения */ max-height: inherit; max-height: initial; max-height: unset; </pre> <h3 id="Values">Значения</h3> <dl> <dt>{{cssxref("<length>")}}</dt> <dd>Максимальная высота выражается как {{cssxref("<length>")}}.</dd> <dt>{{cssxref("<percentage>")}}</dt> <dd>Максимальная высота выражается как {{cssxref("<percentage>")}} от высоты родительского блока.</dd> </dl> <h4 id="Значения-ключевые_слова">Значения-ключевые слова</h4> <dl> <dt><code>none</code></dt> <dd>Высота не имеет максимального значения.</dd> <dt><code>max-content</code>{{experimental_inline()}}</dt> <dd>Внутренняя предпочтительная высота.</dd> <dt><code>min-content</code>{{experimental_inline()}}</dt> <dd>Внутренняя минимальная высота.</dd> <dt><code>fill-available</code>{{experimental_inline()}}</dt> <dd>Высота родительского блока минус вертикальные <code>margin</code>, <code>border</code>, и <code>padding</code>. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., <code>available</code>.)</dd> <dt><code>fit-content</code>{{experimental_inline()}}</dt> <dd>То же что и <code>max-content.</code></dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> {{csssyntax}} <h2 id="Примеры">Примеры</h2> <pre class="brush: css">table { max-height: 75%; } form { max-height: none; } </pre> <h2 id="Проблемы_доступности">Проблемы доступности</h2> <p>Убедитесь, что элементы с <code>max-height</code> не обрезаются и / или не закрывают другой контент, когда страница увеличена для увеличения размера текста. </p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li> </ul> <h2 id="Спецификации">Спецификации</h2> {{Specifications}} <p>{{cssinfo}}</p> <h2 id="Browser_Compatibility">Поддержка браузерами</h2> <p>{{Compat}}</p> <h2 id="See_also">Смотрите также</h2> <ul> <li><a href="/en-US/docs/CSS/box_model" title="en/CSS/box_model">Блочная модель</a></li> <li>{{ Cssxref("max-width") }}, {{ Cssxref("box-sizing") }}, {{ Cssxref("height") }}, {{ Cssxref("min-height") }}</li> </ul>