Свойство min-height

Свойството min-height задава минимална височина на елемент. Стойност на свойството са всякакви мерни единици за размери или ключовата дума none, която означава липса на стойност.

Обикновено се задава за елемент с плаваща ширина (височината е зададена в проценти или не е зададена изобщо, а елементът се разширява по височина от съдържанието си).

Ако е зададена минимална височина - елементът няма да може да стане по-нисък от тази височина. Ако текстът е по-малко, отколкото е нужно за min-height, елементът ще има височина min-height.

Ако текстът е повече - височината на елемента ще се изчисли в зависимост от количеството текст.

Синтаксис

cssселектор {
  min-height: стойност;
}

Пример

В този пример височината не е зададена изобщо и ще бъде изчислена от браузъра самостоятелно в зависимост от количеството текст. Въпреки това, тъй като е зададено свойство min-height, височината по-малка от тази стойност няма да намалее, дори ако в него няма текст:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  min-height: 100px;
  width: 300px;
  border: 1px solid black;
}

Результат:

Пример

Нека добавим на елемента повече текст - така че да се получи препълване на блока по височина. В този случай нашият блок просто ще увеличи своята височина:

html<div id="elem">
  some long text
</div>

css#elem {
  min-height: 100px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Пример

За сравнение нека видим какво ще стане с блока, ако му премахнем минималната височина, а вместо нея зададем свойство height:

html<div id="elem">
  some long text
</div>

css#elem {
  height: 100px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
  margin-bottom: 50px;
}

Результат:

Вижте също