Css высота минимальная блока – Как сделать чтобы минимальная ширина и высота блоков задавалась по содержимому с помощью grid или flex?

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 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

Табл. 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 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

Табл. 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.

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

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

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

Объект.style.minHeight

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

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

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

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

Браузеры

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

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 21.10.2019

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Свойство 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 - Веб-технологии для разработчиков

min-heightChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 3
Полная поддержка 3
Замечания CSS 2.1 leaves the behavior of min-height with table undefined. Firefox supports applying min-height to table elements.
IE Полная поддержка 7
Полная поддержка 7
Замечания In Internet Explorer 10 and 11, a min-height declaration on a column-direction flex container doesn't apply to the container's flex items. See Flexbug #3 for more info.
Opera Полная поддержка 4
Полная поддержка 4
Замечания CSS 2.1 leaves the behavior of min-height with table undefined. Opera supports applying min-height to table elements.
Safari Полная поддержка 1.3WebView Android Полная поддержка 4.4Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4
Полная поддержка 4
Замечания CSS 2.1 leaves the behavior of min-height with table undefined. Firefox supports applying min-height to table elements.
Opera Android Полная поддержка ДаSafari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
autoChrome Полная поддержка 21Edge Нет поддержки НетFirefox Нет поддержки 16 — 22
Нет поддержки 16 — 22
Замечания Firefox 18 and later used auto as the initial value for min-height.
IE Нет поддержки НетOpera Полная поддержка 12.1Safari Нет поддержки НетWebView Android Полная поддержка 37Chrome Android Полная поддержка 25Firefox Android Нет поддержки 16 — 22
Нет поддержки 16 — 22
Замечания Firefox 18 and later used auto as the initial value for min-height.
Opera Android ? Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 1.5
fit-content ЭкспериментальнаяChrome Полная поддержка 46
Полная поддержка 46
Полная поддержка 25
С префиксом Требует вендорный префикс: -webkit-
Edge Нет поддержки НетFirefox Полная поддержка 3С префиксом Замечания
Полная поддержка 3С префиксом Замечания
С префиксом Требует вендорный префикс: -moz-
Замечания Firefox implements the definitions given in CSS3 Basic Box. This defines available and not fit-available. Also, the definition of fit-content is simpler than in CSS3 Sizing.
IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 6.1
Полная поддержка 6.1
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 2Альтернативное имя
Альтернативное имя Использует нестандартное имя: intrinsic
WebView Android Полная поддержка 46
Полная поддержка 46
Полная поддержка ≤37
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 46Firefox Android Полная поддержка 4С префиксом Замечания
Полная поддержка 4С префиксом Замечания
С префиксом Требует вендорный префикс: -moz-
Замечания Firefox implements the definitions given in CSS3 Basic Box. This defines available and not fit-available. Also, the definition of fit-content is simpler than in CSS3 Sizing.
Opera Android Полная поддержка 43Safari iOS Полная поддержка 6.1
Полная поддержка 6.1
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 1Альтернативное имя
Альтернативное имя Использует нестандартное имя: intrinsic
Samsung Internet Android Полная поддержка 5.0
max-contentChrome Полная поддержка 46Edge Нет поддержки НетFirefox Полная поддержка 66
Полная поддержка 66
Полная поддержка 3
С префиксом Требует вендорный префикс: -moz-
IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 11
Полная поддержка 11
Полная поддержка 9
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 46Chrome Android Полная поддержка 46Firefox Android Полная поддержка 66
Полная поддержка 66
Полная поддержка 4
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 43Safari iOS Полная поддержка 11
Полная поддержка 11
Полная поддержка 9
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 5.0
min-contentChrome Полная поддержка 46Edge Нет поддержки НетFirefox Полная поддержка 66
Полная поддержка 66
Полная поддержка 3
С префиксом Требует вендорный префикс: -moz-
IE Нет поддержки НетOpera Полная поддержка 44Safari Полная поддержка 11
Полная поддержка 11
Полная поддержка 9
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 46Chrome Android Полная поддержка 46Firefox Android Полная поддержка 66
Полная поддержка 66
Полная поддержка 4
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 43Safari iOS Полная поддержка 11
Полная поддержка 11
Полная поддержка 9
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 5.0
stretch ЭкспериментальнаяChrome Полная поддержка 28Альтернативное имя
Полная поддержка 28Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Edge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Полная поддержка ДаАльтернативное имя
Полная поддержка ДаАльтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Safari Полная поддержка 9Альтернативное имя
Полная поддержка 9Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
WebView Android Полная поддержка 4.4Альтернативное имя
Полная поддержка 4.4Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Chrome Android Полная поддержка 28Альтернативное имя
Полная поддержка 28Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Firefox Android Нет поддержки НетOpera Android Полная поддержка ДаАльтернативное имя
Полная поддержка ДаАльтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Safari iOS Полная поддержка 9Альтернативное имя
Полная поддержка 9Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available
Samsung Internet Android Полная поддержка 1.5Альтернативное имя
Полная поддержка 1.5Альтернативное имя
Альтернативное имя Использует нестандартное имя: -webkit-fill-available

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
8
9
10

div
  {
  border: 1px solid Red;
  }

HTML код:

14

<div>Блок без указания размеров</div>

Попробуйте менять ширину окна браузера, Вы увидите, что ширина блока тоже меняется.

Установка размеров блока в CSS

Для установления размеров блока есть свойство width, которое устанавливает ширину блока, и свойство height, которое устанавливает высоту блока. Значениями этих свойств являются размеры блока в любых единицах, существующих в CSS, например в пикселях. При указании значения, единицы обязательно нужно указывать.

Для примера добавим на страницу ещё один блок с шириной 500 пикселей и высотой 200 пикселей.

15

<div>Блок с размерами</div>

Размеры можно указывать в процентах от внешнего блока. Если внешнего блока нет, то размер будет в процентах от размера окна страницы. Попробуем оба варианта. В созданный нами блок с размерами поместим ещё один блок и укажем ему ширину 70%. Также создадим отельный блок и тоже укажем ширину 70%

15
16
17
18
19

<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
21

<div>
Блок в процентах от страницы с минимальной шириной</div>

Содержимое за пределами блока

Если блоку заданы размеры, то часть содержимого может не поместиться в блок и оказаться за его пределами. Свойство overflow определяет, как отображается эта часть содержимого. Значения:

overflow: visible - отображается и не учитывает границы (по умолчанию)

overflow: hidden - не отображается

overflow: scroll - содержимое не выходит за границы, а у блока есть полосы прокрутки

overflow: auto - пока содержимое полностью помещается в блок, полос прокрутки нет. А когда содержимое перестаёт помещаться, они появляются

overflow: inherit - значение принимается от родительского элемента

Для примера создадим блок с контентом, выходящим за его пределы. Свойство overflow пока не устанавливаем.

22
23
24
25

<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>

Результат данного примера в окне браузера:

min-height

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

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