min-height

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

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

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

Синтаксис

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

Значення

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

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

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

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

  • min-height застосовується до блочних та інлайн-блочних елементів.
  • Властивість min-height перевизначає мінімальну висоту, навіть якщо задано height менше мінімального значення. Приклад: якщо height: 100px; min-height: 200px; — блок все одно буде висотою 200px.
  • Використовується в адаптивному дизайні для запобігання надмірному стиску елементів на маленьких екранах.
  • Часто застосовується разом з max-height для встановлення діапазону висот елемента.
  • Властивість підтримується всіма сучасними браузерами.