Как растянуть блок на всю высоту экрана с помощью CSS

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

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

Пример в HTML:

<div id="hei">
<h3>bloggood.top</h3>
</div>

в CSS:

#hei
{
height: 100vh;
background:#ccc;
}

Благодаря единице измерений «vh» со значением «100», блок примет высоту на вес экран.

vh – это единица измерений, которую можно расшифровать, как viewport height, высота области просмотра.
1vh равен одному проценту от высоты области просмотра.
Между прочим, есть еще и единица измерений «vw».

vw - это единица измерений, которую можно расшифровать, как viewport width, ширина области просмотра.

Если вам по каким-то причинам не нравится верхний код, можете воспользоваться вот таким:

#hei {
height: 100%;
width:100%;
position: absolute;
background:#ccc;
}

Если и это вам не подошло, тогда вы сможете воспользоваться JS.
Всем пока!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

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

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: css, Вебмастеру, для сайта