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

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
/* <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.

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!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>

min-width | CSS | WebReference

Устанавливает минимальную ширину элемента. Если окно браузера по ширине становится меньше заданной минимальной ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки.

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

Табл. 1. Ширина элемента
Значения свойствШирина
min-width<width<max-widthwidth
min-width>width>max-widthmin-width
min-width>width<max-widthmin-width
min-width<width  
width
min-width>width  min-width
min-width>  max-widthmin-width
min-width<  max-widthmax-width

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

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

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

Синтаксис

min-width: <размер> | <проценты>
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
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-width</title> <style> .
container { min-width: 420px; /* Минимальная ширина контейнера */ } .col1 { background-color: #fc0; /* Цвет фона колонки */ padding: 5px; /* Поля вокруг текста */ float: left; /* Обтекание по правому краю */ width: 150px; /* Ширина левой колонки */ } .col2 { background-color: #c0c0c0; /* Цвет фона колонки */ padding: 5px; /* Поля вокруг текста */ width: 250px; /* Ширина правой колонки */ float: left; /* Обтекание по правому краю */ } </style> </head> <body> <div> <div>Колонка 1</div> <div>Колонка 2</div> </div> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Результат использования min-width в браузере

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

Объект.style.minWidth

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

СпецификацияСтатус
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-height
  • width
  • Адаптивный макет на флексбоксах

Размеры | Windi CSS

Width

Утилиты для установки ширины элемента

auto

px

full

screen

min

max 90 005

проза

xs

sm

md

lg

xl

2xl

3xl

screen-sm

screen-md

screen-lg

screen-xl

screen-2xl

9 0004 1

1,5

2

4

8

10

12

14

18

20

24 9000 5

1/2

1/3

3/5

11/12

4rem

60px

Настройка

windi. config.js

 экспорт по умолчанию {
  тема: {
    продлевать: {
      ширина: {
        половина: «50%»,
      },
    },
  },
}

Min-Width

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

нет

px

full

screen

min

max

prose

xs

sm

md

9 0004 lg

xl

2xl

3xl

экран sm

экран md

screen-lg

screen-xl

screen-2xl

1

1.5

2

4

8

1 0

12

14

18

20

24

1/2

1/3

3/5

11/12

4rem

60px

Настройка

windi.config.js 900 05

 экспорт по умолчанию {
  тема: {
    минимальная ширина: {
      половина: «50%»,
      полный: «100%»,
    },
  },
}

Max-Width

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

нет

px

полный

экран

min

max 90 005

проза

хз

см

md

lg

xl

2xl

3xl

screen-sm

screen-md

screen-lg 9 0005

экран-xl

экран-2xl

1

1,5

2

4

8

10

12

14

18

20

24

900 04 1/2

1/3

3/5

11/12

4rem

60px

Настройка

windi. config.js

 экспорт по умолчанию {
  тема: {
    Максимальная ширина: {
      «1/4»: «25%»,
      «1/2»: «50%»,
      «3/4»: «75%»,
    },
  },
}

Height

Утилиты для установки высоты элемента

auto

px

full

screen

min

max

9 0004 prose

xs

sm

md

lg

xl

2xl

3xl

экран sm

экран md

экран-lg

экран-xl

экран-2xl

1

1.5

2

4

8

90 004 10

12

14

18

20

24

1 /2

1/3

3/5

11/12

4rem

60px

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    высота: {
      см: '8px',
      мд: '16px',
      LG: '24px',
      XL: '48px',
    },
  },
}

Min-Height

Утилиты для установки минимальной высоты элемента

нет

px

полный

экран

min

max 9000 5

prose

xs

sm

md

lg

xl

2xl

3xl

экран-sm

экран-md

экран-lg

экран-xl

экран-2xl 9 0005

1

1,5

2

4

8

10

12

14

18

20

24

9000 4 1/2

1/3

3/5

11/12

4rem

60px

Настройка

windi. config.js

 экспорт по умолчанию {
  тема: {
    минВысота: {
      «0»: «0»,
      «1/4»: «25%»,
      «1/2»: «50%»,
      «3/4»: «75%»,
      «полный»: «100%»,
    },
  },
}

Max-Height

Утилиты для установки максимальной высоты элемента

нет

пикселей

полный

экран

мин

макс

проза

xs

см 90 005

md

lg

xl

2xl

3xl

экран-см

экран -md

экран-lg

экран-xl

экран-2xl

1

1.5

2

4

8

10

12

14

18

20

24

1/2

1/3

3/5

11/12

4rem

60px

Настройка

windi.config.js

 экспорт по умолчанию {
  тема: {
    максимальная высота: {
      «0»: «0»,
      «1/4»: «25%»,
      «1/2»: «50%»,
      «3/4»: «75%»,
      «полный»: «100%»,
    },
  },
}

Box Sizing

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

  • Использование box-border , чтобы указать браузеру включать границы и отступы элемента, когда вы задаете ему высоту или ширину . Это означает, что элемент 100px × 100px с рамкой 2px и отступом 4px со всех сторон будет отображаться как 100px × 100px с внутренней областью содержимого 88px × 88px. Windi делает это значение по умолчанию для всех элементов в наших базовых стилях предварительной проверки.

  • Используйте box-content , чтобы сообщить браузеру добавьте границы и отступы поверх указанной ширины или высоты элемента . Это означает, что элемент 100px × 100px с рамкой 2px и отступом 4px со всех сторон будет фактически отображаться как 112px × 112px с внутренней областью содержимого 100px × 100px.

граница

контент

Предложить изменения на этой страницеPositioningSpacing

fit-content и fit-content() — QuirksBlog

fit-content и fit-content() — QuirksBlog

Улучшить свой CSS? Наймите меня своим тренером.

Архивы JavaScript Совместимость CSS коучинг QuirksБлог Пожертвования Политика Мобильный О COH

Сегодня мы рассмотрим fit-content и fit-content() , которые являются специальными значениями ширины и определения сетки. Это … сложно — не как концепция, а в ее практическом применении.

[ Хотите улучшить свой CSS? Вы можете нанять меня в качестве Тренер по CSS. ]

минимальное и максимальное содержание

Прежде чем рассматривать fit-content , мы должны кратко рассмотреть два других специальных значения width : min-content и max-content . Они нужны вам для понимания fit-content .

Обычно (т. е. с шириной : задано или подразумевается автоматическое ) поле занимает столько горизонтального пространства, сколько может. Вы можете изменить горизонтальное пространство, задав ширину определенное значение, но вы также можете приказать браузеру определять его по содержимому коробки. Вот что min-content и max-content делают.

Попробуйте их ниже.

минимальное содержание и максимальное содержание
ширина: авто : максимально возможная

width: max-content

width: min-content

width: max-content с длинным текстом, который рискует исчезнуть прямо из окна браузера, если будет продолжаться намного дольше

  • минимальное содержание означает: минимальная ширина, необходимая блоку для его содержимого. На практике это означает, что браузеры видят, какая часть контента самая широкая, и устанавливают ширину поля на это значение. Самый широкий фрагмент контента — это самое длинное слово в тексте, самое широкое изображение, видео или другой ресурс.
  • max-content означает: ширина, необходимая блоку для размещения всего его содержимого. В случае с текстом это означает, что весь текст помещается в одну строку, а поле становится настолько широким, насколько это необходимо, чтобы вместить всю эту строку. В общем, это нежелательный эффект. Самый большой бит контента также может быть изображением или видео другим активом; в этом случае браузеры используют эту ширину для определения ширины поля. 905:00

Если вы используете дефисы : auto или что-то подобное, браузер разобьет слова в правильных точках переноса, прежде чем определить минимальную ширину. (Я отключил переносы в примерах.)

Кроличья нора Quick Chromia/Android

Все браузеры на базе Chromium на Android (протестировано в Chrome (v90), Samsung Internet (v87) и Edge (v77)) обрывают текст «width: max-content» в приведенном выше примере на тире и, таким образом, берут ‘width: max-‘ в качестве максимального содержимого, при условии, что страница НЕ имеет метапросмотра. Ни один другой браузер не делает этого, включая Chrome на Mac.

Кроме того, Chromia на Android делает размер шрифта немного меньше, когда вы изменяете размер полей ниже максимально возможной ширины. Я проигнорирую обе ошибки, потому что эта статья о fit-content , а не об этих кроличьих норах.

Эти ошибки НЕ возникают в UC (на основе Chromium 78). Похоже, UC принимает здесь свои собственные решения и невосприимчив к этим конкретным ошибкам.

фит-контент

Теперь, когда мы понимаем эти значения, мы также понимаем фит-контент . По сути, это сокращение для следующего:

коробка {
ширина: авто;
минимальная ширина: минимальное содержание;
максимальная ширина: максимальное содержание;
}

Таким образом, размер блока с его содержащим блоком, но минимум min-content и максимум max-content .

fit-content как ширина, минимальная ширина и максимальная ширина
width: fit-content : пытаюсь найти свою форму

min-width: fit-content

максимальная ширина: подходит для содержимого

Я не уверен, полезен ли этот эффект вне контекста сетки или flexbox, но он здесь, если он вам нужен.

fit-content как min- или max-width

Вы также можете использовать fit-content как значение min-width или max-width ; см. пример выше. Первое означает, что ширина поля варьируется между min-content и auto, а второе означает, что она варьируется от 0 до max-content.

Я нахожу это довольно бесполезным и потенциально запутанным. То, что вы действительно имеете в виду, это min-width: min-content или max-width: max-content . Если ты это имеешь в виду, так и скажи. Ваш CSS будет яснее, если вы это сделаете.

Поэтому я считаю, что лучше не использовать fit-content вместо min-width или max-width ; но только для ширина .

fit-content во флексбоксе и сетке

fit-content также работает во flexbox и сетке. Среднее поле в двух приведенных ниже примерах соответствует своему содержимому.

Предостережение для flexbox: не используйте flex-grow: 1 или любое другое значение выше 0; это дает поле разрешение на размер, превышающий расчетную ширину, и эффект fit-content теряется.

Flexbox с фит-контентом

Тестовое содержимое

fit-content

Тестовое содержимое

А в сетке

Сетка с подходящим контентом

Тестовое содержимое

fit-content

Тестовое содержимое

подходящее содержимое ()

Перейдем к более сложной части: fit-content() . Хотя он должен работать для обычной ширины , это не так.

fit-content и fit-content() как ширина
width: fit-content : пытаюсь найти свою форму

ширина: по размеру содержимого (200 пикселей)

Сетка

Вы можете использовать fit-content(value) в шаблонах сетки, например:

1fr fit-content(200px) 1fr
Сетка с подходящим контентом (200 пикселей)

Тестовое содержимое

fit-content(200px)

Тестовое содержимое

Это означает

1fr min(max-content-size, max(min-content, 200px)) 1fr

Аргумент max() становится min-content или 200 пикселей, в зависимости от того, что больше. Затем это сравнивается с максимальным размером содержимого, который представляет собой фактическую ширину, доступную из-за ограничений сетки, но с максимальным значением 9.0489 максимальное содержание . Таким образом, реальная формула больше похожа на эту, где доступных размеров — это доступная ширина в сетке:

1fr min(min(max-content, available-size), max(min-content, 200px)) 1fr

Некоторые синтаксические примечания:

  • Здесь мы говорим о функции fit-content() . fit-content ключевое слово не работает в определениях сетки.
  • fit-content() нужен аргумент; пустая функция не работает. Кроме того, аргумент в fr единиц недействителен.
  • MDN упоминает значение fit-content(stretch) . Он нигде не работает и нигде больше не упоминается. Я предполагаю, что это происходит из более старой версии спецификации.

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

No related posts.