min-height | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 7.0 | 8.0+ | 1.0+ | 4.0+ | 2.0+ | 1.0+ | 2.1+ | 2.0+ |
Краткая информация
| Значение по умолчанию | 0 |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам, кроме встроенных и таблиц |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visudet.html#min-max-heights |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Задает минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных значений свойств height, max-height и min-height. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.
| Значения свойств | Высота | ||||
|---|---|---|---|---|---|
| min-height | < | height | < | max-height | height |
| min-height | > | height | > | max-height | min-height |
| min-height | > | height | < | max-height | min-height |
| min-height | < | height | height | ||
| min-height | > | height | min-height | ||
| min-height | > | max-height | min-height | ||
| min-height | < | max-height | max-height | ||
Данные из таблицы следует понимать следующим образом. Если значение высоты (height) меньше значения min-height, то высота элемента принимается равной min-height.
Синтаксис
min-height: значение | проценты | inherit
Значения
В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются. inherit наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>min-height</title> <style> #bottom { background: #66806E url(images/clover.png) no-repeat 20px bottom; /* Параметры фона */ min-height: 80px; /* Минимальная высота */ color: #E4BC96; /* Цвет текста */ padding: 5px 5px 5px 140px; /* Поля вокруг текста */ } #bottom p { margin: 5px 0; } #bottom a { color: #FFFDE0; } </style> </head> <body> <div> <p>Сайт Cloverfield</p> <p><a href="techinfo.html">Информация о сайте</a> <a href="activity.html">Об авторе</a></p> </div> </body> </html>
В данном примере, чтобы фоновое изображение не обрезалось по верхнему краю, задана минимальная высота блока равная 80 пикселам. Результат примера показан на рис. 1.
Рис. 1. Высота блока, заданная с помощью min-height
Объектная модель
[window.]document.getElementById(«elementID»).style.minHeight
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
min-height | CSS | WebReference
Задаёт минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных значений свойств height, max-height и min-height. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.
| Значения свойств | Высота | ||||
|---|---|---|---|---|---|
| min-height | < | height | < | max-height | height |
| min-height | > | height | > | max-height | min-height |
| min-height | > | height | < | max-height | min-height |
| min-height | < | height | height | ||
| min-height | > | height | min-height | ||
| min-height | > | max-height | min-height | ||
| min-height | < | max-height | max-height | ||
Данные из таблицы следует понимать следующим образом. Если значение высоты (height) меньше значения min-height, то высота элемента принимается равной min-height.
Краткая информация
| Значение по умолчанию | 0 |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам, кроме строчных и таблиц |
| Анимируется | Да |
Синтаксис ?
min-height: <размер> | <проценты>Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
В качестве значений принимаются пиксели (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>min-height</title>
<style>
footer {
background: #66806E url(/example/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.
Рис. 1. Высота блока, заданная с помощью min-height
Объектная модель
Объект.style.minHeight
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 21.10.2019
Редакторы: Влад Мержевич
Свойство min-height — минимальная высота элемента
Свойство min-height устанавливает минимальную высоту элемента. Значением свойства служат любые единицы для размеров либо ключевое слово none, означающее отсутствие значения.
Обычно задается для элемента с плавающей шириной (высота задана в процентах или не задана вообще, а элемент по высоте раздвигается своим содержимым).
Если задана минимальная высота — то меньше этой высоты элемент не сможет стать. Если текста меньше, чем нужно для min-height, элемент будет иметь высоту min-height.
Если же текста больше — высота элемента вычислится в зависимости от количества текста.
Синтаксис
селектор {
min-height: значение;
}
Пример
В данном примере высота не установлена вообще и будет рассчитана браузером самостоятельно в зависимости от количества текста. Однако, так как установлено свойство min-height, то высота меньше этого значения не уменьшится, даже если текста в нем совсем не будет:
<div>
Lorem ipsum dolor sit amet.
</div> #elem {
min-height: 100px;
width: 300px;
border: 1px solid black;
}
:
Пример
Давайте добавим элементу больше текста — так, чтобы произошло переполнение блока по высоте. В этом случае наш блок просто увеличит свою высоту:
<div>
какой-то длинный текст...
</div> #elem {
min-height: 100px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Пример
Для сравнения давайте посмотрим, что будет с блоком, если убрать ему минимальную высоту, а вместо нее задать свойство height:
<div>
какой-то длинный текст...
</div> #elem {
height: 100px;
width: 300px;
border: 1px solid black;
text-align: justify;
margin-bottom: 50px;
}
:
Смотрите также
- свойство max-height,
которое задает максимальную высоту элемента - свойство max-width,
которое задает максимальную ширину элемента - свойство min-width,
которое задает минимальную ширину элемента
min-height | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 3
| IE Полная поддержка 7
| Opera Полная поддержка 4
| Safari Полная поддержка 1.3 | WebView Android Полная поддержка 4.4 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4
| Opera Android Полная поддержка Да | Safari iOS Полная поддержка 1 | Samsung Internet Android Полная поддержка 1.0 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
auto | Chrome Полная поддержка 21 | Edge Нет поддержки | Firefox Нет поддержки 16 — 22
| IE Нет поддержки Нет | Opera Полная поддержка 12.1 | Safari Нет поддержки Нет | WebView Android Полная поддержка 37 | Chrome Android Полная поддержка 25 | Firefox Android Нет поддержки 16 — 22
| Opera Android ? | Safari iOS Нет поддержки Нет | Samsung Internet Android Полная поддержка 1.5 |
fit-content Экспериментальная | Chrome Полная поддержка 46
| Edge Нет поддержки Нет | Firefox Полная поддержка 3С префиксом Замечания
| IE Нет поддержки Нет | Opera Полная поддержка 44 | Safari Полная поддержка 6.1
| WebView Android Полная поддержка 46
| Chrome Android Полная поддержка 46 | Firefox Android Полная поддержка 4С префиксом Замечания
| Opera Android Полная поддержка 43 | Safari iOS Полная поддержка 6.1
| Samsung Internet Android Полная поддержка 5.0 |
max-content | Chrome Полная поддержка 46 | Edge Нет поддержки Нет | Firefox Полная поддержка 66
| IE Нет поддержки Нет | Opera Полная поддержка 44 | Safari Полная поддержка 11
| WebView Android Полная поддержка 46 | Chrome Android Полная поддержка 46 | Firefox Android Полная поддержка 66
| Opera Android Полная поддержка 43 | Safari iOS Полная поддержка 11
| Samsung Internet Android Полная поддержка 5.0 |
min-content | Chrome Полная поддержка 46 | Edge Нет поддержки Нет | Firefox Полная поддержка 66
| IE Нет поддержки Нет | Opera Полная поддержка 44 | Safari Полная поддержка 11
| WebView Android Полная поддержка 46 | Chrome Android Полная поддержка 46 | Firefox Android Полная поддержка 66
| Opera Android Полная поддержка 43 | Safari iOS Полная поддержка 11
| Samsung Internet Android Полная поддержка 5.0 |
stretch Экспериментальная | Chrome Полная поддержка 28Альтернативное имя
| Edge Нет поддержки Нет | Firefox Нет поддержки Нет | IE Нет поддержки Нет | Opera Полная поддержка ДаАльтернативное имя
| Safari Полная поддержка 9Альтернативное имя
| WebView Android Полная поддержка 4.4Альтернативное имя
| Chrome Android Полная поддержка 28Альтернативное имя
| Firefox Android Нет поддержки Нет | Opera Android Полная поддержка ДаАльтернативное имя
| Safari iOS Полная поддержка 9Альтернативное имя
| Samsung Internet Android Полная поддержка 1.5Альтернативное имя
|
height | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 3.1+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег <img>). Высота не включает толщину границ вокруг элемента, значение отступов и полей.
Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте overflow: auto к стилю элемента.
Синтаксис
height: значение | проценты | auto | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи высота элемента вычисляется в зависимости от высоты родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. auto устанавливает высоту исходя из содержимого элемента
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>height</title>
<style>
.layer {
height: 50px; /* Высота блока */
width: 150px; /* Ширина блока */
overflow: scroll; /* Добавляем полосы прокрутки */
background: #fc0; /* Цвет фона */
padding: 7px; /* Поля вокруг текста */
border: 1px solid #333; /* Параметры рамки */
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства height
Объектная модель
[window.]document.getElementById(«elementID»).style.height
Браузеры
Браузер Internet Explorer 6 некорректно определяет height как min-height.
В режиме совместимости (quirk mode) Internet Explorer до версии 8.0 включительно неправильно вычисляет высоту элемента, не добавляя к ней значение отступов, полей и границ.
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
Размер блока в CSS
Размеры блока по умолчанию
Если в CSS размеры блока не заданы, то они формируются следующим образом: ширина определяется шириной окна страницы или шириной внешнего блока. Блок занимает всю ширину окна страницы или внешнего блока за исключением отступов. А высота блока устанавливается такой, чтобы в блок поместилось всё содержимое. Для примера создадим блок без указания размеров и посмотрим, как он выглядит. Чтобы видеть размеры блока, зададим рамку с помощью свойства border. Подробно рамки будут рассмотрены в следующей теме, а пока просто скопируйте это свойство.
Стиль:
+
7 | div
{
border: 1px solid Red;
} |
HTML код:
14 | <div>Блок без указания размеров</div> |
Попробуйте менять ширину окна браузера, Вы увидите, что ширина блока тоже меняется.
Установка размеров блока в CSS
Для установления размеров блока есть свойство width, которое устанавливает ширину блока, и свойство height, которое устанавливает высоту блока. Значениями этих свойств являются размеры блока в любых единицах, существующих в CSS, например в пикселях. При указании значения, единицы обязательно нужно указывать.
Для примера добавим на страницу ещё один блок с шириной 500 пикселей и высотой 200 пикселей.
15 | <div>Блок с размерами</div> |
Размеры можно указывать в процентах от внешнего блока. Если внешнего блока нет, то размер будет в процентах от размера окна страницы. Попробуем оба варианта. В созданный нами блок с размерами поместим ещё один блок и укажем ему ширину 70%. Также создадим отельный блок и тоже укажем ширину 70%
15 | <div> Блок с размерами <div>Блок в процентах от внешнего блока</div> </div> <div>Блок в процентах от страницы</div> |
Обратите внимание — при изменении ширины окна браузера отдельный блок меняет свою ширину, а тот, который внутри другого блока, остаётся неизменным, ведь его ширина зависит от размера, заданного точно.
У размеров есть значение:
width: auto;
height: auto;
При этом значении размеры блока определяются также, как если они не заданы. Это значение используется, если размер ранее был задан, а теперь его нужно вернуть к начальному.
Также у размеров есть значение:
width: inherit;
height: inherit;
При этих свойствах блок получает значения размеов от родительского элемента.
Браузеры, особенно старые, по-разному определяют CSS размеры блока. Поэтому при установлении размеров нужно тщательно проверять отображение страницы.
Минимальные и максимальные размеры блока
Если в CSS размер блока не задан точно и может меняться, то можно установить минимальный и максимальный размер. Для этого есть свойства min-width, max-width, min-height, max-height.
Для примера создадим ещё один блок размером также 70% ширины окна браузера и установим ему минимальную ширину 600 пикселей. Когда Вы будете уменьшать окно браузера, этот блок уменьшится только до 600 пикселей, а далее будет неизменным.
20 | <div> Блок в процентах от страницы с минимальной шириной</div> |
Содержимое за пределами блока
Если блоку заданы размеры, то часть содержимого может не поместиться в блок и оказаться за его пределами. Свойство overflow определяет, как отображается эта часть содержимого. Значения:
overflow: visible — отображается и не учитывает границы (по умолчанию)
overflow: hidden — не отображается
overflow: scroll — содержимое не выходит за границы, а у блока есть полосы прокрутки
overflow: auto — пока содержимое полностью помещается в блок, полос прокрутки нет. А когда содержимое перестаёт помещаться, они появляются
overflow: inherit — значение принимается от родительского элемента
Для примера создадим блок с контентом, выходящим за его пределы. Свойство overflow пока не устанавливаем.
22 | <div> Элемент<br>с большим<br>количеством<br>содержимого<br> которое<br>занимает<br>несколько<br>строк</div> <div>Следующий элемент</div> |
Текст этого блока выходит за границы и накладывается на другие элементы страницы. Установим свойство overflow:
22 | <div> |
Теперь содержимое за границами блока не отображается. Для текста это не подходит, ведь пользователь не сможет его прочитать. Попробуйте установить другие значения. Со значением scroll блок имеет обе полосы прокрутки. А со значением auto горизонтальной прокрутки нет, ведь содержимое помещается в блок по ширине.
Существуют свойства overflow-x и overflow-y, которые отдельно устанавливают отображение содержимого по ширине и высоте. Они имеют те же значения.
min-height | CSS справочник
Поддержка браузерами
| 12.0+ | 7.0+ | 3.0+ | 1.0+ | 4.0+ | 2.0.2+ |
Описание
CSS свойство min-height устанавливает минимальную высоту области для содержимого элемента.
Примите во внимание, что минимальная высота элемента вычисляется по формуле:
min-height+padding(верхний и нижний)+border(ширина рамки)
т.е. если вы зададите min-height: 500px, padding: 5px, border 1px, то минимальная высота получится 512px.
Примечание: CSS свойство min-height работает только с блочными элементами.
| Значение по умолчанию: | 0 |
|---|---|
| Применяется: | ко всем элементам, кроме незаменяемых строчных элементов, столбцов таблицы и групп столбцов |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS2 |
| Синтаксис JavaScript: | object.style.minHeight=»10px» |
Синтаксис
min-height: %|величина|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| величина | Определяет минимальную высоту в единицах измерения CSS. |
| % | Минимальная высота указывается в процентах и высчитывается в зависимости от высоты родительского элемента. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
p {
min-height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<p>Минимальная высота элемента 100px.</p>
</body>
</html>
Результат данного примера в окне браузера:
