Height min css: min-height — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

min-height | CSS | WebReference

Задаёт минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных значений свойств 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: <размер> | <проценты>
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
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

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

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

7121711
1171
Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Размеры

См. также

  • max-height
  • max-width
  • min-width
  • Макет сайта на флексбоксах

height — CSS — Дока

Кратко

Скопировано

Любой HTML-элемент сам по себе по высоте равен нулю. Обычно элементы подстраиваются по высоте под то количество контента, которое лежит у него внутри. Но что делать, если дизайнер придумал иначе, или если внутри вообще ничего нет?

При помощи свойства height можно задать высоту любому блочному (block) или строчно-блочному (inline-block) элементу. Высоту можно задавать как в абсолютных единицах (пикселях px) так и в относительных (проценты, vh, vmin, rem и так далее).

Помимо фиксированной высоты мы можем задать минимальную высоту элемента — min-height. В этом случае элемент сможет растягиваться на большую высоту, если того требует контент, размещённый внутри, но никогда не сожмётся по высоте меньше, чем указано в свойстве min-height.

Для максимальной высоты мы пишем свойство max-height. И тогда элемент будет иметь возможность растягиваться по высоте до тех пор, пока не достигнет размера, указанного в свойстве max-height. И дальше не растянется ни на пиксель.

Пример

Скопировано

<div>  <div></div></div>
          
 
 
<div>
  <div></div>
</div>

.container {  /* высота родителя */  height: 150px;  padding: 25px;  background-color: #AFC9DA;}.item {  /* высота вложенного блока */  height: 50px;  margin: 0 10px;  background-color: #FFFFFF;}
          . container {
  /* высота родителя */
  height: 150px;
  padding: 25px;
  background-color: #AFC9DA;
}
.item {
  /* высота вложенного блока */
  height: 50px;
  margin: 0 10px;
  background-color: #FFFFFF;
}
Открыть демо в новой вкладке

Поскольку оба блока — .container и .item — пустые, в них нет контента, то без стилей их высота будет равна нулю. Мы изменили это, задав элементу .container высоту 150px, а элементу .item высоту 50px.

Добавим контент в элемент

.item:

Открыть демо в новой вкладке

Из-за фиксированной высоты контент вываливается из блока. Как можно это исправить? Заменить height на min-height!

.item {  /* Меняем фиксированную высоту на минимальную */  min-height: 50px;  margin: 0 10px;  background-color: #FFFFFF;}
          .item {
  /* Меняем фиксированную высоту на минимальную */
  min-height: 50px;
  margin: 0 10px;
  background-color: #FFFFFF;
}

Теперь, если контента внутри не будет, то высота блока будет равна 50px, но как только появится контент — элемент растянется по высоте так, чтобы уместить в себе весь контент!

Открыть демо в новой вкладке

Как понять

Скопировано

Свойство height даёт возможность менять высоту любого блока на своё усмотрение.

Как пишется

Скопировано

Пишем свойство height для фиксированной высоты, min-height для минимальной высоты и max-height для максимальной высоты.

Для элемента можно написать только одно из них, два или все три сразу, если это нужно для решения конкретной задачи.

В качестве значения пишем число, а за ним без пробела единицу измерения: px, %, vh, rem, em или любую другую единицу измерения, доступную в вебе.

div {  height: 10px;  min-height: 100%;  max-height: 100vh;}
          div {
  height: 10px;
  min-height: 100%;
  max-height: 100vh;
}

Подсказки

Скопировано

💡 Свойство высоты не наследуется.

💡 По умолчанию задаётся значение auto.

Это ключевое слово бывает полезно, когда нужно сбросить высоту, заданную ранее. Например, оно пригодится при доработке сайта, к исходным стилям которого нет доступа.

Стили, до которых нет доступа с фиксированной высотой:

.container {  height: 150px;}
          .container {
  height: 150px;
}

Твои стили, где перезаписывается предыдущее значение: теперь высота подстраивается под контент.

.container {  height: auto;}
          .container {
  height: auto;
}

Также оно может пригодится при адаптивной вёрстке.

💡 Не задавайте фиксированную высоту блокам, в которых есть контент. Если контента станет больше, то блок не растянется и контент из него выпадет. Не надо так. Если без высоты никак не обойтись, то используйте min-height.

💡 Строчные элементы не реагируют на height. Хотите изменить высоту? Меняйте элемент со строчного (inline) на блочный (block) или строчно-блочный (inline-block)!

💡 Пишете height: 100% и ничего не работает? Помните, что высота в процентах рассчитывается от высоты родителя.

И сработает, только если у родителя задана эта самая высота.

Отношения родительский-дочерний элемент проще объяснить на примере.

<div>  <div>    <div></div>  </div>  <div></div>  <div></div></div>
          <div>
  <div>
    <div></div>
  </div>
  <div></div>
  <div></div>
</div>

В примере выше элемент с классом parent является родительским для элементов с классом child. Они, в свою очередь, будут называться дочерними по отношению к элементу с классом parent.

Для элемента с классом grandchild родительским будет элемент с классом child-1.

Применительно к нашей ситуации элемент grandchild будет наследовать свою высоту от элемента child-1.

На практике

Скопировано

Алёна Батицкая советует

Скопировано

🛠 Чаще всего не требуется задавать фиксированную высоту блокам с контентом. Можно обойтись внутренними отступами (padding).

Вернёмся к примеру, который разбирали выше. Можно совсем убрать свойство height и заменить его на padding: 25px. Теперь, если контента внутри блока нет, то внутренние отступы сверху (25 пикселей) и снизу (25 пикселей) будут растягивать элемент на 50 пикселей.

Открыть демо в новой вкладке

Как только добавится контент, блок растянется, не произойдёт никакого выпадения контента, потому что не задана фиксированная высота. От верхнего и нижнего краёв контента до верхнего или нижнего краёв блока соответственно будут отступы в 25 пикселей.

Открыть демо в новой вкладке

Чтобы родительский блок .container тоже подстраивался под размеры контента, можно:

  1. Заменить фиксированную высоту на минимальную: min-height: 150px.
Открыть демо в новой вкладке
  1. Убрать высоту совсем и заменить её на внутренние отступы (padding). Этот вариант подойдёт, если не принципиально сохранить высоту 150 пикселей.
Открыть демо в новой вкладке

🛠 Но есть несколько ситуаций, в которых без высоты никак.

  1. В блоке нет контента. Он декоративный. Например, квадрат. Задаём одинаковые высоту и ширину. Profit!
  2. Первый экран сайта. Обычно дизайнеры хотят, чтобы первый экран всегда был по высоте не больше и не меньше высоты экрана пользователя. В этом случае поможет height: 100vh. Не забудь подстраховаться и задать минимальную высоту блоку. Например: min-height: 350px. Никогда нельзя быть уверенным, что высоты экрана пользователя достаточно для того, чтобы уместился весь важный контент.

🛠 В реальных задачах крайне редко требуется задавать высоту в относительных единицах rem и em. Эти единицы завязаны на размере шрифта. Рассчитывать высоту блока от размера текста почти никогда не требуется.

Но другие относительные единицы: vh, vw, а также vmin и vmax — будут встречаться вам гораздо чаще. Рассчитывать высоту элемента от высоты или ширины экрана пользователя бывает очень удобно.

CSS минимальная высота

Свойство CSS min-height используется для ограничения высоты элемента. Элемент может отображать любой размер до min-height , в зависимости от его содержимого.

Синтаксис

мин-высота: [ [<длина> | <процент>] && [граница-бокс | поле содержимого]? ] | доступно | мин-содержание | максимальное содержание | фит-контент | нет

Возможные значения

длина
Указывает минимальное значение для высота как значение длины (например, 300px ). Отрицательные значения недопустимы.
процент
Задает минимальное значение для высоты как процентов высоты содержащего блока. Отрицательные значения недопустимы. Если высота содержащего блока отрицательна, используемое значение равно нулю.
в наличии
Равен высоте содержащего блока за вычетом поля, границы и заполнения текущего элемента.
максимальное содержание
Максимальная высота содержимого.
мин. содержание
Минимальная высота содержимого.
фит-контент
То же, что и min-content .
нет
Указывает, что высота блока не ограничена.

Значения ключевого слова всегда задают размер блока содержимого (на них не влияет размер коробки свойство). Это не относится к значениям длины и в процентах .

Кроме того, все свойства CSS также принимают следующие значения ключевых слов CSS в качестве единственного компонента значения их свойства:

начальный
Представляет значение, указанное как начальное значение свойства.
унаследовать
Представляет вычисленное значение свойства родительского элемента.
снято с охраны
Это значение действует как inherit или initial , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительские значения, если они наследуемые, или их начальные значения, если они не наследуемые.

Общая информация

Исходное значение
0
Применяется к
Все элементы, кроме незаменяемых встроенных элементов, столбцов таблицы и групп столбцов
Унаследовано?
№
СМИ
Визуальный
Анимируемый
Да (см. пример)

Пример кода

Вот несколько примеров допустимых значений min-height :

.box { минимальная высота: 75px } .коробка { мин-высота: 5вх; } . коробка { минимальная высота: 80%; } .коробка { минимальная высота: доступна; } .коробка { минимальная высота: минимальное содержание; } .коробка { минимальная высота: максимальное содержание; } .коробка { минимальная высота: нет; }

Официальные характеристики

  • Базовая блочная модель CSS (черновик редактора W3C)
  • CSS, уровень 2.1 (рекомендация W3C от 7 июня 2011 г.)

Свойство CSS: min-height: `auto` | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск ?

Свойство CSS: min-height: `auto`

  • Глобальное использование
    93,48% + 0% «=» 93,48%
IE
  1. 6–10: не поддерживается
  2. 11: не поддерживается
Edge
  1. 12–18: не поддерживается
  2. 89% — Supported»> 79 – 112: Поддерживается
  3. 113: Поддерживается
Firefox
  1. 2–15: не поддерживается
  2. 16–21: поддерживается
  3. 22–112: не поддерживается
  4. 113: не поддерживается
  5. 114–115: не поддерживается
Chrome
  1. 4–20: не поддерживается
  2. 21–112: поддерживается
  3. 113: поддерживается
  4. 114–116: поддерживается
9017 0 Safari
  1. 3.1–6.1: не поддерживается
  2. 15% — Supported»> 7–16.4: Поддерживается
  3. 16.5: Поддерживается
  4. 16.6 — TP: Поддерживается
Opera
  1. 10 — 11.5: Не поддерживается
  2. 12.1 — 97: Поддерживается 901 54
  3. 98: поддерживается
Safari на iOS
  1. 3.2–6.1: не поддерживается
  2. 7–16.4: поддерживается
  3. 16.5: поддерживается
Opera Mini
  1. все: поддержка неизвестна
Android Браузер
  1. 2.1–4.4.4: не поддерживается
  2. 113 : Поддерживается
Opera Mobile

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *