Css height 100: html — How to make a div 100% height of the browser window?

Leave a Comment / Css / By /

min-height — CSS | MDN

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

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

/* <length> значения */
min-height: 3.5em;
/* <percentage> значения */
min-height: 10%;
/* Значения-ключевые слова */
min-height: max-content;
min-height: min-content;
min-height: fit-content;
min-height: fill-available;
/* Глобальные значения */
min-height: inherit;
min-height: initial;
min-height: unset;

Значения

<length>

Минимальная высота выражается как <length>. Отрицательные значения делают свойство недействительным.

<percentage>

Минимальная высота выражается как

<percentage> от высоты родительского блока. Отрицательные значения делают свойство недействительным.

Значения-ключевые слова
auto

Минимальная высота для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем 0 для других способов разметки.

max-content Экспериментальная возможность

Внутренняя предпочтительная высота.

min-content Экспериментальная возможность

Внутренняя минимальная высота.

fill-available Экспериментальная возможность

Высота родительского блока минус вертикальные margin, border, и padding. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., available.)

fit-content Экспериментальная возможность

Согласно CSS3 Box, это синоним min-content. CSS3 Sizing определяет более сложный алгоритм, но ни один браузер не реализует его даже экспериментальным путём.

Формальный синтаксис

min-height = 
auto                                      | (en-US)
<length-percentage [0,∞]> (en-US)                 | (en-US)
min-content                               | (en-US)
max-content                               | (en-US)
 
fit-content( <length-percentage [0,∞]> (en-US) )  
"><length-percentage> = 
<length>      | (en-US)
<percentage>  
table { min-height: 75%; }
form { min-height: 0; }
Specification
CSS Box Sizing Module Level 3
# width-height-keywords

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.
  • height, max-height
  • Блочная модель (en-US), box-sizing

Last modified: , by MDN contributors

height — CSS — Дока

Кратко

Секция статьи «Кратко»

Любой HTML-элемент сам по себе по высоте равен нулю. Обычно элементы подстраиваются по высоте под то количество контента, которое лежит у него внутри. Но что делать, если дизайнер придумал иначе, или если внутри вообще ничего нет?

При помощи свойства height можно задать высоту любому блочному (block) или строчно-блочному (inline-block) элементу. Высоту можно задавать как в абсолютных единицах (пикселях px) так и в относительных (проценты, vh, vmin, rem и так далее).

Помимо фиксированной высоты мы можем задать минимальную высоту элемента — min-height. В этом случае элемент сможет растягиваться на большую высоту, если того требует контент, размещённый внутри, но никогда не сожмётся по высоте меньше, чем указано в свойстве min-height.

Для максимальной высоты мы пишем свойство max-height. И тогда элемент будет иметь возможность растягиваться по высоте до тех пор, пока не достигнет размера, указанного в свойстве max-height. И дальше не растянется ни на пиксель.

Пример

Секция статьи «Пример»
<div>  <div></div></div>
          <div>
  <div></div>
</div>

 
.container {  /* высота родителя */  height: 150px;  padding: 25px;  background-color: #AFC9DA;}.item {  /* высота вложенного блока */  height: 50px;  margin: 0 10px;  background-color: #FFFFFF;}
          .container {
  /* высота родителя */
  height: 150px;
  padding: 25px;
  background-color: #AFC9DA;
}
. item {
  /* высота вложенного блока */
  height: 50px;
  margin: 0 10px;
  background-color: #FFFFFF;
}
Открыть демо в новой вкладке

Поскольку оба блока — .container и .item — пустые, в них нет контента, то без стилей их высота будет равна нулю. Мы изменили это, задав элементу .container высоту 150px, а элементу .item высоту 50px.

Добавим контент в элемент .item:

Открыть демо в новой вкладке

Из-за фиксированной высоты контент вываливается из блока. Как можно это исправить? Заменить height на min-height!

.item {  /* Меняем фиксированную высоту на минимальную */  min-height: 50px;  margin: 0 10px;  background-color: #FFFFFF;}
          .item {
  /* Меняем фиксированную высоту на минимальную */
  min-height: 50px;
  margin: 0 10px;
  background-color: #FFFFFF;
}

Теперь, если контента внутри не будет, то высота блока будет равна 50px, но как только появится контент — элемент растянется по высоте так, чтобы уместить в себе весь контент!

Открыть демо в новой вкладке

Как понять

Секция статьи «Как понять»

Свойство height даёт возможность менять высоту любого блока на своё усмотрение.

Как пишется

Секция статьи «Как пишется»

Пишем свойство height для фиксированной высоты, min-height для минимальной высоты и max-height для максимальной высоты.

Для элемента можно написать только одно из них, два или все три сразу, если это нужно для решения конкретной задачи.

В качестве значения пишем число, а за ним без пробела единицу измерения: px, %, vh, rem, em или любую другую единицу измерения, доступную в вебе.

div {  height: 10px;  min-height: 100%;  max-height: 100vh;}
          div {
  height: 10px;
  min-height: 100%;
  max-height: 100vh;
}

Подсказки

Секция статьи «Подсказки»

💡 Свойство высоты не наследуется.

💡 По умолчанию задаётся значение auto.

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

Стили, до которых нет доступа с фиксированной высотой:

.container {  height: 150px;}
          .container {
  height: 150px;
}

Твои стили, где перезаписывается предыдущее значение: теперь высота подстраивается под контент.

.container {  height: auto;}
          .container {
  height: auto;
}

Также оно может пригодится при адаптивной вёрстке.

💡 Не задавайте фиксированную высоту блокам, в которых есть контент. Если контента станет больше, то блок не растянется и контент из него выпадет. Не надо так. Если без высоты никак не обойтись, то используйте min-height.

💡 Строчные элементы не реагируют на height. Хотите изменить высоту? Меняйте элемент со строчного (inline) на блочный (block) или строчно-блочный (inline-block)!

💡 Пишете height: 100% и ничего не работает? Помните, что высота в процентах рассчитывается от высоты родителя.

И сработает, только если у родителя задана эта самая высота.

Отношения родительский-дочерний элемент проще объяснить на примере.

<div>  <div>    <div></div>  </div>  <div></div>  <div></div></div>
          <div>
  <div>
    <div></div>
  </div>
  <div></div>
  <div></div>
</div>

В примере выше элемент с классом parent является родительским для элементов с классом child. Они, в свою очередь, будут называться дочерними по отношению к элементу с классом parent.

Для элемента с классом grandchild родительским будет элемент с классом child-1.

Применительно к нашей ситуации элемент grandchild будет наследовать свою высоту от элемента child-1.

На практике

Секция статьи «На практике»

Алёна Батицкая советует

Секция статьи «Алёна Батицкая советует»

🛠 Чаще всего не требуется задавать фиксированную высоту блокам с контентом. Можно обойтись внутренними отступами (padding).

Вернёмся к примеру, который разбирали выше. Можно совсем убрать свойство height и заменить его на padding: 25px. Теперь, если контента внутри блока нет, то внутренние отступы сверху (25 пикселей) и снизу (25 пикселей) будут растягивать элемент на 50 пикселей.

Открыть демо в новой вкладке

Как только добавится контент, блок растянется, не произойдёт никакого выпадения контента, потому что не задана фиксированная высота. От верхнего и нижнего краёв контента до верхнего или нижнего краёв блока соответственно будут отступы в 25 пикселей.

Открыть демо в новой вкладке

Чтобы родительский блок .container тоже подстраивался под размеры контента, можно:

  1. Заменить фиксированную высоту на минимальную: min-height: 150px.
Открыть демо в новой вкладке
  1. Убрать высоту совсем и заменить её на внутренние отступы (padding). Этот вариант подойдёт, если не принципиально сохранить высоту 150 пикселей.
Открыть демо в новой вкладке

🛠 Но есть несколько ситуаций, в которых без высоты никак.

  1. В блоке нет контента. Он декоративный. Например, квадрат. Задаём одинаковые высоту и ширину. Profit!
  2. Первый экран сайта. Обычно дизайнеры хотят, чтобы первый экран всегда был по высоте не больше и не меньше высоты экрана пользователя. В этом случае поможет height: 100vh. Не забудь подстраховаться и задать минимальную высоту блоку. Например: min-height: 350px. Никогда нельзя быть уверенным, что высоты экрана пользователя достаточно для того, чтобы уместился весь важный контент.

🛠 В реальных задачах крайне редко требуется задавать высоту в относительных единицах rem и em. Эти единицы завязаны на размере шрифта. Рассчитывать высоту блока от размера текста почти никогда не требуется.

Но другие относительные единицы: vh, vw, а также vmin и vmax — будут встречаться вам гораздо чаще. Рассчитывать высоту элемента от высоты или ширины экрана пользователя бывает очень удобно.

Высота — попутный ветер CSS

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

​Фиксированная высота

Используйте

h-{number} или h-px , чтобы установить для элемента фиксированную высоту.

 
h-96


ч-80


ч-64


h-48


ч-40


h-32


h-24

​Полная высота

Используйте h-full , чтобы установить высоту элемента на 100% от его родительского элемента, если родительский элемент имеет определенную высоту.

 <дел>
  <дел>

Высота области просмотра

Используйте h-screen , чтобы элемент занимал всю высоту области просмотра.

 <дел>

​Применение условно

​Наведение, фокус и другие состояния

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

hover:h-full , чтобы применять утилиту h-full только при наведении.

 <дел>