Свойство min-height задает минимальную высоту блока.
Это свойство применимо к блочным элементам и тегу <img>.
Не поддерживается Internet Explorer до версии 8.0.
Высота блока не включает ширину отступов, полей и толщину границы, а задается только для его содержимого.
Значение свойства min-height
- в единицах измерения, принятых в CSS (подробнее здесь...),
- none - отменяются все ограничения на ширину,
- inherit - принимает значение свойства родительского элемента.
Значение по умолчанию
- none
Заданная высота блока фиксирована, если высота содержимого не превышает установленного размера.
Но с ростом высоты содержимого (выше минимально установленной), пропорционально будет расти высота блока.
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство min-height </title>
<style type="text/css">
p{border:#FF0000 solid 2px; width:200px; padding:3px; min-height:50px;}
</style>
</head>
<body>
<p> Минимальная высота абзаца 50 пикселей. </p>
<p> Минимальная высота абзаца 50 пикселей. Но как видите высота растет
по мере увеличения размера содержимого. </p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство min-height </title>
<style type="text/css">
p{border:#FF0000 solid 2px; width:200px; padding:3px; min-height:50px;}
</style>
</head>
<body>
<p> Минимальная высота абзаца 50 пикселей. </p>
<p> Минимальная высота абзаца 50 пикселей. Но как видите высота растет
по мере увеличения размера содержимого. </p>
</body>
</html>
Результат
