Свойство min-height устанавливает минимальную высоту элемента. Значением свойства служат любые единицы для размеров либо ключевое слово none, означающее отсутствие значения.
Обычно задается для элемента с плавающей шириной (высота задана в процентах или не задана вообще, а элемент по высоте раздвигается своим содержимым).
Если задана минимальная высота - то меньше этой высоты элемент не сможет стать. Если текста меньше, чем нужно для min-height, элемент будет иметь высоту min-height.
Если же текста больше - высота элемента вычислится в зависимости от количества текста.
Синтаксис
селектор {
min-height: значение;
}
Пример
В данном примере высота не установлена вообще и будет рассчитана браузером самостоятельно в зависимости от количества текста. Однако, так как установлено свойство min-height, то высота меньше этого значения не уменьшится, даже если текста в нем совсем не будет:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
min-height: 100px;
width: 300px;
border: 1px solid black;
}
:
Пример
Давайте добавим элементу больше текста - так, чтобы произошло переполнение блока по высоте. В этом случае наш блок просто увеличит свою высоту:
<div id="elem">
какой-то длинный текст...
</div>
#elem {
min-height: 100px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Пример
Для сравнения давайте посмотрим, что будет с блоком, если убрать ему минимальную высоту, а вместо нее задать свойство height:
<div id="elem">
какой-то длинный текст...
</div>
#elem {
height: 100px;
width: 300px;
border: 1px solid black;
text-align: justify;
margin-bottom: 50px;
}
:
Смотрите также
-
свойство max-height,
которое задает максимальную высоту элемента -
свойство max-width,
которое задает максимальную ширину элемента -
свойство min-width,
которое задает минимальную ширину элемента