Css height min height: min-height — CSS&colon; Cascading Style Sheets — Вебджем.рф

Содержание

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.

Размеры

CSS по теме

min-height

Статьи по теме

Рецепты CSS

height | HTML и CSS с примерами кода

Свойство min-height задаёт минимальную высоту элемента.

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

Если значение высоты (

height) меньше значения min-height, то высота элемента принимается равной min-height.

Блоки

height
width
max-height
max-width
min-height
min-width

margin
margin-bottom
margin-left
margin-right
margin-top
margin-trim

padding
padding-bottom
padding-left
padding-right
padding-top

overflow
overflow-x
overflow-y
visibility

Синтаксис

/* <length> value */
min-height: 3. 5em;
/* <percentage> value */
min-height: 10%;
/* Keyword values */
min-height: max-content;
min-height: min-content;
min-height: fit-content;
min-height: fill-available;
/* Global values */
min-height: inherit;
min-height: initial;
min-height: unset;

Значения

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

auto: Минимальная высота для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем 0 для других способов разметки.
max-content: Внутренняя предпочтительная высота.
min-content: Внутренняя минимальная высота.
fill-available: Высота родительского блока минус вертикальные margin, border, и padding. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова available. )
fit-content: Согласно CSS3 Box, это синоним min-content. CSS3 Sizing определяет более сложный алгоритм, но ни один браузер не реализует его даже экспериментальным путем.

Значение по-умолчанию:

min-height: auto;

Применяется ко всем элементам, кроме строчных и таблиц

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

CSS Intrinsic & Extrinsic Sizing Module Level 3
CSS Flexible Box Layout Module
CSS Transitions
CSS Level 2 (Revision 1)

Поддержка браузерами

Can I Use minmaxwh? Data on support for the minmaxwh feature across the major browsers from caniuse.com.

Описание и примеры

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

мин-высота | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Свойство min-height в CSS используется для установки минимальной высоты указанного элемента. Свойство min-height всегда переопределяет как height

, так и max-height . Авторы могут использовать любые значения длины, если они являются положительными значениями.

 .обертка {
  высота: 100%; /* полная высота блока содержимого */
  минимальная высота: 20em; /* Будет как минимум 20em в высоту */
}
.обертка {
  высота: 600 пикселей;
  минимальная высота: 400 пикселей; /* Будет как минимум 400 пикселей в высоту: переопределяет высоту */
}
. обертка {
  минимальная высота: 400 пикселей; /* переопределяет высоту и максимальную высоту */
  высота: 200 пикселей;
  максимальная высота: 300 пикселей;
}

Если одно из значений больше ( height > min-height или наоборот), наибольшее значение будет отображено. 9Свойство 0005 min-height будет применяться ко всем элементам, кроме незаменяемых встроенных элементов, столбцов таблицы и групп столбцов (например, colgroup

, col ).

Browser support

IE	Edge	Firefox	Chrome	Safari	Opera
All	All	All	All	All	All

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
All	All	All	All	59+

Source: caniuse Альманах на 15 января 2021 г.

высота

.элемент { высота: 500 пикселей; } Альманах на 15 января 2021 г.

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

.element { max-height: 3rem; } Альманах на 15 января 2021 г.

Максимальная ширина


  .элемент { максимальная ширина: 100%; }

Альманах на 15 января 2021 г.

минимальная ширина

.элемент { минимальная ширина: 300 пикселей; } Альманах на 3 марта 2021 г.

ширина

.elment { ширина: 50%; }

CSS минимальная/максимальная ширина/высота | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

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

Поиск

Минимальная/максимальная ширина/высота CSS

— РЕК

Глобальное использование
99,95% + 0% знак равно 99,95%

Метод установки минимальной или максимальной ширины или высоты элемента.

Chrome

4 — 106: Supported
107: Supported
108 — 110: Supported

Edge

12 — 106: Supported
107: Supported

Safari

57% — Supported»> 3.1 — 16.0: Supported
16.1: Supported
16.2 — TP: Supported

Firefox

2 — 106: Supported
107: Supported
108 — 109: Supported

Opera

9 — 91: Поддерживается
92: Поддерживается

IE

5,5 — 6: не поддерживается (но имеет полифил.0212 9 — 10: Supported
11: Supported

Chrome for Android

107: Supported

Safari on iOS

89% — Supported»> 3.2 — 16.0: Supported
16.1: Supported

Samsung Internet

4 — 18.0: Поддерживается
19.0: Поддерживается

Opera Mini

все: Поддерживается

Opera Mobile

10 — 12.1: Поддерживается3
0153

UC Browser for Android

13.4: Supported

Android Browser

2.1 — 4.4.4: Supported
107: Supported

Firefox for Android

106: Supported

Css height min height: min-height — CSS: Cascading Style Sheets

min-height | htmlbook.ru

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

Версии CSS

Описание

Синтаксис

Значения

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

Браузеры

CSS по теме

Статьи по теме

Рецепты CSS

height | HTML и CSS с примерами кода

Синтаксис

Значения

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

Поддержка браузерами

Описание и примеры

мин-высота | CSS-трюки — CSS-трюки

Browser support

высота

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

Максимальная ширина

минимальная ширина

ширина

CSS минимальная/максимальная ширина/высота | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Минимальная/максимальная ширина/высота CSS

Глобальное использование

Chrome

Edge

Safari

Firefox

Opera

IE

Chrome for Android

Safari on iOS

Samsung Internet

Opera Mini

Opera Mobile

UC Browser for Android

Android Browser

Firefox for Android

QQ Browser

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

Рубрики