Min height: 🤷🏽‍♀️ Page not found | MDN Web Docs

Содержание

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

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

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

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

Блоки

Синтаксис

/* <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 определяет более сложный алгоритм, но ни один браузер не реализует его даже экспериментальным путем.

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

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

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

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

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 свойство min-height

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

Min-height отменяет использование свойств height и max-height.

Свойство устанавливается в единицах измерения длины CSS (px, pt, em и т. д.) или в процентах.

Отрицательные значения недопустимы.

Значение по умолчанию none
Применяется Ко всем элементам, кроме незаменяемых строчных элементов, колонок таблицы, групп колонок.
Наследуется Нет
Анимируемое Да. Высота анимируема.
Версия CSS2
DOM синтаксис object.style.minHeight = "100px";

Синтаксис¶

min-height: length | initial | inherit;

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      min-height: 50px;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства min-height</h3>
    <div>Минимальная высота текстовой области равна 50px.</div>
  </body>
</html>
Попробуйте сами!

В следующем примере минимальная высота элемента равна "3cm":

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      background-color: #ccc;  
      }
      p.example {
      min-height: 3cm;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства min-height</h3>
    <h4>Min-height: none.</h4>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. </p>
    <h4>Min-height: 3cm.</h4>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
  </body>
</html>
Попробуйте сами!

Значения¶

Значение Описание
auto Устанавливает минимальную высоту. Значение по умолчанию.
length Устанавливает минимальную высоту в единицах измерения (px, pt, cm и т.д.). Значение по умолчанию - 0.
% Устанавливает минимальную высоту в процентах.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

CSS свойство min-height | назначение, допустимые значения, примеры

Свойство min-height задает минимально возможную высоту для элемента. Т.е. если в элементе содержимое имеет высоту меньше min-height, тогда у блока будет высота равна min-height. Если же высота содержимого будет больше, тогда высота блока будет равна высоте содержимого.

Примечание: тут под содержимым понимается контентная часть + внутренние отступы (padding-top, padding-bottom) + толщина границ (border-top, border-bottom).

Допустимые значения

  • — точное значение в единицах длины (px - пиксели, in - дюймы, cm - сантиметры, pt - пункты)
  • — процент от размера элемента-родителя
  • none — нет ограничений
  • inherit — наследует значение от родителя
Значение по умолчанию 0
Применимо ко всем блочным элементам, а так же img и элементам таблиц (кроме colgroup и col)
Наследование нет
Версия CSS CSS 2
Поддерживается браузерами
  • Internet Explorer 7 и выше
  • Firefox 1 и выше
  • Opera 7 и выше
  • Netscape 6 и выше
  • Safari 1 и выше
  • Chrome 1 и выше

Пример

p {
min-height: 20px;
}

Твой код:
<html> <head> <title></title> <style type="text/css"> <!-- p { min-height: 60px; background: yellow; } --> </style> </head> <body> <p>Этот абзац не может быть меньше 60px по высоте </p> </body> </html>Сделай код и жми тут

Результат:
большой полигон

Заметки

Свойство min-width Свойство max-width

Min и Max Width/Height в CSS

В процессе верстки у меня немалое количество раз возникали проблемы с размерами элементов, поэтому я всегда старался находить лучшие варианты решения каких-либо распространенных проблем.

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


1) Для кнопок (или "кнопкаподобных" дивов) стоит задавать padding и min-width

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


2) Для блоков с текстом стоит предпочесть min-height и padding

Таким образом мы избежим переполнения блока, текст не будет выезжать за края. Очень частая ошибка новичков - использовать просто height


3) Для "табов" обязательно нужно указать min-width и max-width

Но в таком случае остается нерешенным один очень важный вопрос: что делать со слишком длинным текстом? Для решения данной проблемы прекрасно подойдут 3 свойства ниже:

overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

Наглядный пример: https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16


4) Минимальная ширина флекс-элемента по умолчанию равняется ширине контента

Этот пункт отчасти относится к посту, который я собирался делать следующим – он будет о том, как правильно работать со слишком длинным и коротким текстом.

Но этот лайфхак как по мне не кажется очевидным, к данной теме он тоже относится, к тому же он выручал меня уже дважды за последние 2 недели (!)

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

Все дело вот в чем: по умолчанию флекс-контейнер не может стать меньше длины своего контента: то есть по умолчанию min-width: ширина контента. Для корректной работы вам нужно указать min-width: 0:

Наглядный пример: https://codepen.io/shadeed/pen/398ccffcd437a2fb042f5ce3bdd68c57


5) Минимальная высота флекс-элемента по умолчанию равняется высоте контента

Пункт, аналогичный пункту 4, только хочу так же привести его с хорошим примером: если указать блоку-контейнеру фиксированную высоту и написать блоку с текстом overflow-y: scroll, height: 100%, то это ни к чему не приведет

Здесь так же нужно воспользоваться min-height: 0:

Наглядный пример: https://codepen.io/shadeed/pen/dea75b84b1fcfd03e5c21173a40afc20?editors=0100


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

Теперь верстать у меня получается гораздо лучше)

Надеюсь, что эти советы покажутся вам полезными! 🙂

html - min-height 100vh создает вертикальную полосу прокрутки, даже если содержимое меньше, чем область просмотра

Я применяю min-height: 100vh; к контейнеру flexbox и получаю вертикальную полосу прокрутки при использовании justify-content: space-around;

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

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
.wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
<link href="https://necolas.github.io/normalize.css/5.0.0/normalize.css" rel="stylesheet"/>
<div>
  <div>
    <h2>min-height: 100vh;</h2>
    <h3>why is there a scrollbar here?</h3>
  </div>
  <div>
    Be sure to expand window. 
    <a href="#">skill one</a>
    <a href="#">skill one</a>
    <a href="#">skill one</a>
    <a href="#">skill one</a>
  </div>
</div>

14

George Katsanos 28 Фев 2017 в 15:13

2 ответа

Лучший ответ

Добавление flex-grow, похоже, помогает:

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-around;
}

https://jsfiddle.net/uxgaaccr/2/

Не знаю почему, но height: 100% на .wrapper, похоже, недостаточно, ему вместо этого требуется flex-grow. Я думаю, что justify-content: space-around прибавил лишний пробел, который увеличивал высоту. Не уверен в моих рассуждениях, но, похоже, работает ...

10

Jazcash 28 Фев 2017 в 12:50

Основываясь на ответе @ Jazcash выше, его можно упростить еще больше.

По сути, нам нужно переместить min-height: 100vh к родительскому элементу и применить к нему display: flex. flex-grow не требуется.

https://jsfiddle.net/gkatsanos/uxgaaccr/3/

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
}

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
<link href="https://necolas.github.io/normalize.css/5.0.0/normalize.css" rel="stylesheet"/>
<div>
  <div>
    <h2>min-height: 100vh;</h2>
    <h3>why is there a scrollbar here?</h3>
  </div>
  <div>
    Be sure to expand window. 
    <a href="#">skill one</a>
    <a href="#">skill one</a>
    <a href="#">skill one</a>
    <a href="#">skill one</a>
  </div>
</div>

3

George Katsanos 28 Фев 2017 в 12:56

CSS min-height Свойство


Пример

Установите минимальную высоту элемента

на 200 пикселей:

p.ex1 {
минимальная высота: 200 пикселей;
}

Попробуй сам "

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

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

Если содержимое меньше минимальной высоты, минимальная высота будет применяемый.

Если содержимое превышает минимальную высоту, min-height собственности не имеет никакого эффекта.

Примечание: Это предотвращает значение свойство height не становиться меньше, чем мин-высота .

Значение по умолчанию: 0
Унаследовано: нет
Анимируемый: да, посмотреть отдельные свойства .Прочитать про animatable Попытайся
Версия: CSS2
Синтаксис JavaScript: объект .style.minHeight = "400px" Попытайся

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

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

Объект
мин-высота 1.0 7,0 3,0 2.0.2 4,0


Синтаксис CSS

мин-высота: длина | начальная | наследование;

Стоимость недвижимости


Связанные страницы

Учебник

CSS: высота и ширина CSS

Ссылка CSS: свойство max-height

Ссылка

HTML DOM: minHeight свойство



мин-высота | CSS-уловки

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

  .wrapper {
  высота: 100%; / * полная высота поля содержимого * /
  мин-высота: 20em; / * БУДЕТ МИНИМУМ высотой 20em * /
}

.wrapper {
  высота: 600 пикселей;
  минимальная высота: 400 пикселей; / * Будет НЕ МЕНЬШЕ 400 пикселей в высоту: переопределяет высоту * /
}

.wrapper {
  минимальная высота: 400 пикселей; / * переопределяет высоту и максимальную высоту * /
  высота: 200 пикселей;
  максимальная высота: 300 пикселей;
}  

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

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

Android Chrome
IE Edge Firefox Chrome Safari Opera
Все Все Все Все Все Все
Android Firefox Браузер Android iOS Safari Opera Mobile
Все Все Все Все 59+
Источник: caniuse

Сопутствующие свойства

CSS: свойство min-height


В этом руководстве по CSS объясняется, как использовать свойство CSS под названием min-height с синтаксисом и примерами.

Описание

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

Синтаксис

Синтаксис CSS-свойства min-height:

.
  min-height: value;  

Параметры или аргументы

значение

Минимальная высота области содержимого элемента. Это может быть одно из следующих значений:

Значение Описание
фиксированный Фиксированное значение в пикселях, em и т. Д.
div {минимальная высота: 50 пикселей; }
div {минимальная высота: 40em; }
процент Процентное значение
div {min-height: 50%; }
унаследовать Указывает, что элемент унаследует минимальную высоту от своего родительского элемента
div {min-height: inherit; }

Примечание

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

Совместимость с браузером

Свойство CSS min-height имеет базовую поддержку в следующих браузерах:

  • Хром
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Телефон
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Пример

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

Использование фиксированного значения

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

  div {минимальная высота: 20 пикселей; }  

В этом примере минимальной высоты CSS высота тега

не может быть меньше 20 пикселей.

Мы также можем выразить min-height как фиксированное значение в em.

Например:

  div {минимальная высота: 50em; }  

В этом примере минимальной высоты CSS высота тега

не может быть меньше 50em.

Использование процента

Давайте посмотрим на пример минимальной высоты CSS, где мы предоставили минимальную высоту в процентах.

  div {min-height: 75%}  

В этом примере минимальной высоты CSS высота

не может стать меньше 75%.

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

· Документы WebPlatform

Сводка

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

Обзорная таблица

Начальное значение
авто (0 для негибких элементов)
Относится к
Все элементы, кроме незамещенных встроенных элементов, столбцов таблицы и групп столбцов
Унаследовано
Нет
Медиа
визуальный
Расчетное значение
Указанный процент или абсолютная длина
Анимационный
Да
Свойство объектной модели CSS
мин-высота
в процентах
высоты содержащего блока.Если высота содержащего блока зависит от содержимого, а элемент не имеет абсолютной позиции, тогда это значение становится равным 0.

Синтаксис

  • мин-высота: авто
  • min-height: calc
  • min-height: заполнение доступно
  • min-height: fit-content
  • min-height: наследовать
  • мин-высота: длина
  • min-height: max-content
  • min-height: min-content
  • min-height: процент

Значения

авто
По умолчанию.Ведет себя как 0 для элементов, отличных от Flexbox. На flexbox действует как min-content.
длина
Задает фиксированную высоту. Отрицательные значения не допускаются. Смотрите длину для возможных единиц.
процент
<процент> относительно высоты содержащего блока. Если содержащий блок не имеет явно заданной высоты, то он обрабатывается как 0. Отрицательные значения не допускаются.
расчет
Подробнее о режиме см. В функции css calc.
наследовать
Принимает то же указанное значение, что и свойство родительского элемента.
макс-содержание
Максимально узкое пространство, которое коробка могла бы занять при размещении вокруг ее содержимого, если бы не использовалась ни одна из возможностей мягкого обтекания внутри коробки (пробел / пунктуация в тексте - примеры возможности мягкого обтекания). Требуется поддержка модуля CSS Intrinsic & Extrinsic Sizing в браузерах.
мин-содержание
Самая узкая мера, которую может принять блок, не приводящая к переполнению встроенного измерения, чего можно было бы избежать, выбрав более крупную меру. Грубо говоря, мера, которая подошла бы к ее содержимому, если бы были использованы все возможности мягкой упаковки внутри коробки.Требуется поддержка модуля CSS Intrinsic & Extrinsic Sizing в браузерах.
заполнение доступно
Заполнить все доступное пространство из содержащего блока (высота минус горизонтальное поле, граница и отступ содержащего блока). Требуется поддержка модуля CSS Intrinsic & Extrinsic Sizing в браузерах.
fit-content
Если общее доступное пространство конечно, равно min (max-content, max (min-content, fill-available)). В противном случае равняется показателю max-content.Требуется поддержка модуля CSS Intrinsic & Extrinsic Sizing в браузерах.

Примеры

Используйте min-height с любым селектором CSS, чтобы применить его.

 
div {min-height: 100 пикселей}
  
Свойство

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

  <стиль>



.without-min-height, .with-min-height {
    ширина: 100 пикселей;
}


.with-min-height {
    фон: голубой;
    минимальная высота: 300 пикселей;
}

.without-min-height {
    фон: красный;
}

.содержание {
    граница: сплошной черный 1px;
    отступ: 10 пикселей;
}


Без минимальной высоты. Высота взята из содержимого (с черной рамкой).


С минимальной высотой. Контент (с черной рамкой) может не заполнять весь элемент.

Посмотреть живой пример

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

  Минимальная высота CSS хорошо поддерживается большинством браузеров. Несколько вещей, которые следует учитывать при использовании:
  
  • min-height переопределяет max-height.Если предоставленная минимальная высота больше, чем максимальная высота, максимальная высота не влияет.
  • max-content, min-content, fit-content и fill-available находятся на стадии черновика W3C и поддерживаются не во всех браузерах.
  • Поддержка calc лучше во всех браузерах. Могут потребоваться префиксы поставщиков.

Связанные спецификации

CSS 2.1 (Раздел 10.7)
Рекомендация W3C
Модуль определения внутренних и внешних размеров CSS, уровень 3
Осадка рабочий

См. Также

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

Коробка Модель

Связанные страницы

Атрибуты

мин-высота | Codrops

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

Иногда бывает полезно ограничить высоту элемента в CSS определенным диапазоном. Для установки минимальной и максимальной высоты элемента доступны два свойства: свойство min-height и свойство max-height .

Свойство min-height переопределяет свойства height и max-height и предотвращает уменьшение значения свойства height меньше заданного значения.

Официальный синтаксис

Заметки

В CSS3 для свойства min-height были введены новые значения. Официальный синтаксис выглядит так:

  мин-высота: [[<длина> | <процент>] && [граница | content-box]? ] | в наличии | мин-контент | max-content | fit-content  

Значения

<длина>
Задает фиксированную минимальную вычисленную высоту.См. Запись для получения списка возможных значений.
<процент>
<Процент> рассчитывается относительно высоты содержащего блока. Если высота содержащего блока не указана явно (т. Е. Зависит от высоты содержимого), и этот элемент не позиционирован абсолютно, процентное значение обрабатывается как 0 .

См. Запись <процент> для списка возможных значений.

наследовать
Элемент наследует минимальное значение высоты от своего родителя.

Следующие экспериментальные значения ключевых слов были введены в CSS3.

в наличии
Высота равна высоте содержащего блока за вычетом полей, границ и отступов текущего элемента.
макс-содержание
Собственная предпочтительная высота. max-content height - это, грубо говоря, высота, которую контент имел бы, если бы не были вставлены «мягкие» разрывы строк, то есть если каждый абзац представляет собой одну длинную строку.
мин-содержание
Собственная минимальная высота. Высота min-content - это, грубо говоря, самая высокая коробка, которую можно получить, если разорвать все строки во всех возможных точках разрыва.

Следующее изображение помогает понять значения min-content и max-content .

Например, в простом абзаце, состоящем только из текста, максимальная высота содержимого - это высота строки, если все слова расположены в одной строке; а высота минимального содержимого - это высота содержимого после разрыва всех строк во всех возможных точках разрыва.
fit-content
То же, что и min-content .

В CSS3 определено новое значение, но оно еще не реализовано ни в одном браузере.Это значение содержит значение с плавающей запятой.

содержат поплавки
Это значение будет стандартным способом очистки поплавков. Он эквивалентен min-content , за исключением того, что при применении к экстенту элемента блока он заставляет его быть достаточно большим, чтобы содержать поля полей любых плавающих объектов, которые происходят внутри блока и которые участвуют в том же контексте форматирования блока, что и непосредственное содержимое блока.

См. Запись свойства float для получения дополнительной информации о float, что такое очистка float и почему это важно.

Банкноты

Отрицательные значения не допускаются.

На значения ключевых слов (в отличие от значений длины и процента) не влияет свойство box-sizing, они всегда устанавливают размер поля содержимого.

Доступно , max-content , min-content и fit-content эквивалентны 0 при установке на min-height горизонтальных элементов (когда режим записи горизонтальный, т.е. свойство имеет значение горизонтально-тб ).

Примеры

минимальная высота: 250 пикселей;
минимальная высота: 50%;
мин-высота: 100vh;
мин-высота: наследовать;
                 

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

Свойство min-height работает во всех основных браузерах: Chrome, Firefox, Safari, Opera, Internet Explorer, а также на Android и iOS.

Новые экспериментальные значения, добавленные в CSS3, еще не поддерживаются во всех браузерах, а некоторые из них имеют разные эквиваленты, поддерживаемые в некоторых браузерах. Поддержка браузером новых значений показана в следующей таблице:

* обозначает обязательный префикс.

  • Поддерживается:
  • Да
  • Нет
  • Частично
  • Полифилл

Статистика с caniuse.com

Банкноты

Свойство min-height работает в Safari с позиционированными элементами.

CSS 2.1 явно оставляет поведение min-height с

undefined, поэтому оно по-прежнему поддерживается не всеми браузерами.

CSS мин. Высота

Пример <стиль> кнопка { фон: зелено-желтый; минимальная ширина: 100 пикселей; минимальная высота: 50 пикселей; }

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

Синтаксис

мин-высота: [[<длина> | <процент>] && [граница | content-box]? ] | в наличии | мин-контент | max-content | подходящий контент | нет

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

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

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

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

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

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

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

Пример кода

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

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

Официальные спецификации

CSS Свойство min-height

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

Свойство min-height переопределяет свойства max-height и height.

Свойство принимает длину CSS (px, pt, em и т. Д.) Или проценты.

Отрицательные значения не принимаются.

Синтаксис¶

  min-height: length | начальная | наследовать;  

Пример свойства min-height: ¶

  

  
     Название документа 
    <стиль>
      div {
        минимальная высота: 50 пикселей;
        цвет фона: # 8ebf42;
      }
    
  
  
    

Пример свойства Min-height

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

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

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