max-height

CSS-властивість max-height визначає максимальну висоту елемента, тобто найбільшу висоту, до якої елемент може бути розтягнутий. Вона дозволяє контролювати висоту елементів, запобігаючи їхньому надмірному розширенню, навіть якщо контейнер або вікно браузера має дуже великий розмір. Це важливо для забезпечення адаптивності елементів і коректного відображення на великих екранах.

Інтерактивний приклад використання

Випускники GoIT працюють у 2100+ ІТ компаній України, Європи та США

Синтаксис

max-height: <length> | <percentage> | max-content | min-content | fit-content | none;

Значення

  • <length> — фіксоване значення максимального розміру в одиницях виміру, таких як px, em, rem тощо, навіть якщо контейнер має більшу висоту.
  • <percentage> — максимальна висота елемента в відсотках від висоти батьківського елемента.
  • max-content — максимальна висота елемента буде рівною висоті найбільшого елемента, який в ньому міститься, без переносу (якщо є великий текст або зображення).
  • min-content — встановлює максимальну висоту елемента, при якій весь вміст ще можна розмістити без обрізання, надаючи елементу мінімально необхідну висоту для вмісту.
  • fit-content — висота елемента підлаштовується під вміст, але не перевищує доступний простір контейнера..

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • max-height дозволяє обмежити висоту елемента, не дозволяючи йому розтягуватися за межі заданого значення. Вона особливо корисна для елементів, які повинні адаптуватися до висоти екрану чи контейнера, але не повинні виходити за певні межі.
  • Властивість max-height часто комбінується з min-height для створення діапазону можливих розмірів елемента. Це дозволяє контролювати елементи на різних пристроях і з різними розмірами екранів.
  • Використання max-height з height дозволяє задати фіксовану висоту елемента, але з обмеженням максимального розміру.
  • Значення fit-content дає змогу контролювати елементи так, щоб їх висота відповідала вмісту, але не перевищувала заданих обмежень.
  • max-height підтримується всіма сучасними браузерами.