min-height

Содержание

Задаёт минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных значений свойств height, max-height и min-height. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

Табл. 1. Высота элемента
Значения свойствВысота
min-height<height<max-heightheight
min-height>height>max-heightmin-height
min-height>height<max-heightmin-height
min-height<height  height
min-height>height  min-height
min-height>  max-heightmin-height
min-height<  max-heightmax-height

Данные из таблицы следует понимать следующим образом. Если значение высоты (height) меньше значения min-height, то высота элемента принимается равной min-height.

Краткая информация

Значение по умолчанию0
НаследуетсяНет
ПрименяетсяКо всем элементам, кроме строчных и таблиц

Синтаксис

min-height: <размер> | <проценты>

Значения

В качестве значений принимаются пиксели (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>min-height</title>
  <style>
   footer {
    background: #66806E url(image/clover.png) no-repeat 20px bottom; /* Параметры фона */ 
    min-height: 80px; /* Минимальная высота */ 
    color: #E4BC96; /* Цвет текста */ 
    padding: 5px 5px 5px 140px; /* Поля вокруг текста */ 
   }
   footer p { margin: 5px 0; }
   footer a {
    color: #FFFDE0;
   }
  </style>
 </head>
 <body>
  <footer>
    <p>Сайт Cloverfield</p>
    <p><a href="page/techinfo.html">Информация о сайте</a>
    <a href="page/activity.html">Об авторе</a></p>
  </footer>
 </body>
</html>

В данном примере, чтобы фоновое изображение не обрезалось по верхнему краю, задана минимальная высота блока равная 80 пикселям. Результат примера показан на рис. 1.

Высота блока, заданная с помощью min-height

Рис. 1. Высота блока, заданная с помощью min-height

Объектная модель

Объект.style.minHeight

Спецификация

СпецификацияСтатус
CSS Intrinsic & Extrinsic Sizing Module Level 3Рабочий проект
CSS TransitionsРабочий проект
CSS Level 2 (Revision 1)Рекомендация

Браузеры

Internet ExplorerChromeOperaSafariFirefox
71711
AndroidFirefox MobileOpera MobileSafari Mobile
1171

См. также





Рекомендую хостинг: beget.ru

Сервер падал:113 дн. 2:07 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru