min-height в CSS


Особенности свойства height в %

Обычно свойство height , указанное в процентах, означает высоту относительно внешнего блока.

Однако, всё не так просто. Интересно, что для произвольного блочного элемента height в процентах работать не будет!

Чтобы лучше понимать ситуацию, рассмотрим пример.

Пример

Наша цель – получить вёрстку такого вида:

При этом блок с левой стрелкой должен быть отдельным элементом внутри контейнера.

Это удобно для интеграции с JavaScript, чтобы отлавливать на нём клики мыши.

То есть, HTML-код требуется такой:

Как это реализовать? Подумайте перед тем, как читать дальше…

Придумали. Если да – продолжаем.

Есть разные варианты, но, возможно, вы решили сдвинуть .toggler влево, при помощи float:left (тем более что он фиксированной ширины) и увеличить до height: 100% , чтобы он занял всё пространство по вертикали.

Вы ещё не видите подвох? Смотрим внимательно, что будет происходить с height: 100% …

Демо height:100% + float:left

А теперь – посмотрим этот вариант в действии:

Как видно, блок со стрелкой вообще исчез! Куда же он подевался?

Ответ нам даст спецификация CSS 2.1 пункт 10.5.

«Если высота внешнего блока вычисляется по содержимому, то высота в % не работает, и заменяется на height:auto . Кроме случая, когда у элемента стоит position:absolute .»

В нашем случае высота .container как раз определяется по содержимому, поэтому для .toggler проценты не действуют, а размер вычисляется как при height:auto .

Какая же она – эта автоматическая высота? Вспоминаем, что обычно размеры float определяются по содержимому (10.3.5). А содержимого-то в .toggler нет, так что высота нулевая. Поэтому этот блок и не виден.

Если бы мы точно знали высоту внешнего блока и добавили её в CSS – это решило бы проблему.

min-height

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

Иногда может случиться так, что содержимое не сможет вместиться в заданные или вычисленные размеры. Тогда оно будет размещено поверх элемента и его окружения. В таких случаях поможет свойство overflow.

Во избежание «конфликта» размеров, при вычислении итоговой высоты браузеры используют определенный алгоритм расчетов:

Вычисление высоты элементов

Соотношение первичных значений Итоговая высота
Если min-height max-height max-height
Если min-height > height min-height
Если min-height > height > max-height min-height
Если min-height > height » означает «больше», а « Вычисление размеров замещаемых элементов
Соотношение первичных значений Итоговая ширина Итоговая высота
Если width > max-width, где (max-width * height/width) max-width
Если (width > max-width) и (height > max-height), где (max-width/width ≤ max-height/height) и (min-height > max-width * height/width)
Если (width max-width) и (height max-height min-width max-height
Если height > max-height, где (max-height * width/height) max-width) и (height > max-height), где (max-width/width > max-height/height) и (min-width > max-height * width/height)
Если (width min-height/height) и (max-height max-height)
Если width > max-width, где (max-width * height/width) > min-height max-width max-width * height/width
Если (width > max-width) и (height > max-height), где (max-width/width ≤ max-height/height) и (min-height min-height/height) и (max-height > min-width * height/width)
Если height > max-height, где (max-height * width/height) > min-width max-height * width/height max-height
Если (width > max-width) и (height > max-height), где (max-width/width > max-height/height) и (min-width min-height * width/height)

Тип свойства

Применяется: ко всем элементам, кроме незамещаемых встроенных (inline) элементов ( , , и т.д.), тегов и и элементов с display: table-column и table-column-group.

Значения

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

  • Размер — относительные или абсолютные величины в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Отрицательные значения недопустимы.
  • Проценты — значения в процентах (%), где за 100% берется высота элемента-предка по следующему алгоритму:
    1. Для непозиционируемых и относительно позиционируемых элементов (position: static или relative ) минимальная высота считается относительно высоты ближайшего блочного (block) элемента-предка, встроенного блока (inline-block) или ячейки таблицы, а если таких нет, то относительно тела документа ( ).
    2. Минимальная процентная высота самого тела документа считается относительно высоты корневого элемента ( ).
    3. Минимальная высота корневого элемента считается относительно высоты окна браузера.
    4. Для элементов с position: fixed минимальная высота считается относительно высоты окна браузера.
    5. Для элементов с position: absolute минимальная высота считается относительно высоты элемента, от которого идет позиционирование, причем с учетом его внутренних отступов (padding), а если такого элемента нет, то относительно окна браузера.

    Отрицательные процентные значения (-20%) указывать нельзя. Кроме этого, если элемент-предок, от которого идет расчет, не является абсолютно позиционированным (position) и его высота не указана явно, то процентное значение не будет работать, то есть оно станет равным нулю (0).

  • inherit — наследует значение min-height от родительского элемента.

Процентная запись: относительно высоты элемента-предка или окна браузера.

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

Синтаксис

Пример CSS: использование min-height

Результат. Использование свойства CSS min-height.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Нет Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Нет Частично Да Да Да Да Да

Internet Explorer 7.0 не понимает значение inherit . Также этот браузер может неправильно вычислять размер замещаемых элементов, например изображений, когда min-height указывается совместно с width.

min-height

Поддержка браузеров

IE Opera Chrome Firefox Safari
IE7.0+; IE 7.0 не поддерживает значение inherit + + + +

Пример

Задаем минимальную высоту элемента:

Описание и использование

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

Примечание: свойство min-height не включает в себя отступы, поля и границы.

CSS min-height Property

Example

Set the minimum height of a

element to 200 pixels:

Definition and Usage

The min-height property defines the minimum height of an element.

If the content is smaller than the minimum height, the minimum height will be applied.

If the content is larger than the minimum height, the min-height property has no effect.

Note: This prevents the value of the height property from becoming smaller than min-height .

Default value:
Inherited: no
Animatable: yes, see individual properties. Read about animatable Try it
Version: CSS2
JavaScript syntax: object.style.minHeight=»400px» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Не понятно, как работает свойство min-height в CSS

Справочник: min-height задаёт минимальную высоту элемента. Можно ли объяснить, на что влияет данное свойство? Если экран сузить меньше указанной величины ничего не происходит визуально. Объясните, пож-ста.

2 ответа 2

Допустим у вас на странице ряд изображений, вы им задаете высоту height:auto; и ограничение не меньше 40px min-height:40px; и все изображения если они разной высоты будут разной высоты, но с ограничением не меньше 40px.

Если вам нужно задать процентное ограничение по высоте, то в таком случае высота родительского блока должна быть задана явно.

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

Если вы берете проценты, их нужно брать от чего то Т.е. либо пропишите:

Либо укажите в родительском элементе тоже самое:

Тогда min-height прекрасно работает.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.9.35389

CSS: min-height property

This CSS tutorial explains how to use the CSS property called min-height with syntax and examples.

Description

The CSS min-height property defines the minimum height of the content area of an element.

Syntax

The syntax for the min-height CSS property is:

Parameters or Arguments

The min-height of the content area of an element. It can be one of the following:

Value Description
fixed Fixed value expressed in pixels, em’s, etc.
div < min-height: 50px; >
div
percentage Percentage value
div
inherit Indicates that the element will inherit the min-height from its parent element
div
  • The content area of an element is inside the padding, border, and margin of the element.
  • The CSS min-height property applies to block level and replaced elements.
  • The CSS min-height property is used to prevent the CSS height from becoming smaller than the value specified in the CSS min-height property.
  • When the value is provided as a percentage, it is relative to the height of the containing block.
  • See also height, width, max-height, max-width, min-width.

Browser Compatibility

The CSS min-height property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the min-height property below, exploring examples of how to use this property in CSS.

Using Fixed Value

Let’s look at a CSS min-height example where we have provided the min-height as a fixed value expressed in pixels.

In this CSS min-height example, the height of the

We can also express the min-height as a fixed value in em’s.

In this CSS min-height example, the height of the

Using Percentage

Let’s look at a CSS min-height example where we have provided the min-height as a percentage.

In this CSS min-height example, the height of the

min-height

Браузер Internet Explorer Netтscape Опера Safari Mozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Да Да

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

CSS (ЦСС) CSS (ЦСС)2
Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам, кроме встроенных и таблиц
Аналог ШТМЛ Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visudet.ШТМЛ#min-max-heights

Описание

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

Табл. 1. Высота элемента

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

Синтаксис

min-height: значение | none

Аргументы

В качестве значений принимаются пикселы (px) и проценты (%). Значение none убирает все ограничения на высоту.

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

В данном примере, чтобы фоновое изображение не обрезалось по верхнему краю, задана минимальная высота блока равная 80 пикселам. Результат примера показан на рис. 1.

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

Min-height в CSS

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

Это свойство применимо к блочным элементам и тегу .

Не поддерживается Internet Explorer до версии 8.0.

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

Значение

— в единицах измерения, принятых в CSS (подробнее здесь. ),

— none — отменяются все ограничения на ширину,

— inherit — принимает значение свойства родительского элемента.

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

Заданная высота блока фиксирована, если высота содержимого не превышает установленного размера.

Но с ростом высоты содержимого (выше минимально установленной), пропорционально будет расти высота блока.

Пример

Пример — Свойство min-height

«-//W3C//DTD HTML 4.01 Transitional//EN»
«http://www.w3.org/TR/html4/loose.dtd» >

«Content-Type» content= «text/html; charset=windows-1251» >
Свойство min-height

Минимальная высота абзаца 50 пикселей.

Минимальная высота абзаца 50 пикселей. Но как видите высота растет
по мере увеличения размера содержимого.

CSS min-height

The CSS min-height property is used to constrain the height of an element. The element can render at any size up to the min-height , depending on its contents.

Syntax

Possible Values

The keyword values always set the size of the content box (they are not affected by the box-sizing property). This doesn’t apply to length and percentage values.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Example Code

Here are some examples of valid min-height values:

Min-Height

Class Properties
.min-h-0 min-height: 0;
.min-h-full min-height: 100%;
.min-h-screen min-height: 100vh;

Usage

Set the minimum height of an element using the min-h-0 , min-h-full , or min-h-screen utilities.

Responsive

To control the min-height of an element at a specific breakpoint, add a : prefix to any existing min-height utility.

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

Customizing

Min-height scale

Customize Tailwind’s default min-height scale in the theme.minHeight section of your tailwind.config.js file.

Learn more about customizing the default theme in the theme customization documentation.

Responsive and pseudo-class variants

By default, only responsive variants are generated for min-height utilities.

You can control which variants are generated for the min-height utilities by modifying the minHeight property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

Disabling

If you don’t plan to use the min-height utilities in your project, you can disable them entirely by setting the minHeight property to false in the corePlugins section of your config file:

Илон Маск рекомендует:  Вложенные списки
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL