skip to main content

height

css

Кратко 🔗

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

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

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

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

Пример 🔗

<div class="container">
<div class="item"></div>
</div>
.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;
}

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

Как это понять 🔗

С английского языка height переводится как высота.

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

Как пишется 🔗

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

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

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

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

Подсказки 🔗

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

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

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

CSS

/* Стили, до которых нет доступа */
.container {
height: 150px; /* фиксированная высота */
}

...

/* Твои стили */
.container {
height: auto; /* перезаписываем предыдущее значение, теперь высота подстраивается под контент */
}

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

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

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

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

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

<div class="parent">
<div class="child child-1">
<div class="grandchild"></div>
</div>
<div class="child"></div>
<div class="child"></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 — будут встречаться вам гораздо чаще. Рассчитывать высоту элемента от высоты или ширины экрана пользователя бывает очень удобно.

Автор: Алёна,