Как растянуть элемент на всю высоту css

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

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

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

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

Пример

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

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

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

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

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

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

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

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

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

.container < border: 1px solid black; >.content < /* margin-left нужен, так как слева от содержимого будет стрелка */ margin-left: 35px; >.toggler < /* Зададим размеры блока со стрелкой */ height: 100%; width: 30px; float: left; background: #EEE url("arrow_left.png") center center no-repeat; border-right: #AAA 1px solid; cursor: pointer; >

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

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

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

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

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

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

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

/*+ no-beautify */ .container < height: 200px; /* теперь height в % внутри будет работать */ >

Как растянуть div на 100% по вертикали (CSS)

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

Задача

Растянуть div по вертикали на 100% относительно родительского блока или экрана. Резиновая высота div.

Решение

Ваш div займет 100% по вертикали только в том случае, если высота родительского блока задана 100%. Так что последовательно прописываем высоту 100% у всех блоков по иерархии, включая body и html.

Пока мы не проставим высоту 100% всем блокам, в который вложен целевой div, ничего не выйдет. Как только пропишем, все встанет как надо.

Резиновый по вертикали сайт

Таким же образом мы можем задать высоту внутреннего div не 100%, а меньше, тем самым обеспечив сохранение пропорций верстки на разных экранах по вертикали.

   html < height: 100%; >body < height: 100%; >html, body < margin: 0; padding: 0; >.page  
content
   

растянуть блок на всю высоту экрана пользователя

Растянуть страницу на всю высоту экрана
Использую MasterPage. В него кидаю таблицу 3х3, в центральной ячейке которой находится.

Растянуть полосы таблицы вертикально на всю высоту экрана
Здравствуйте. Столкнулся с проблемой вёрстки таблицы, а именно нужно сделать продолжение полосок.

Растянуть блок на всю высоту
Имеется блок див, который должен быть: Растянут на всю высоту окна — 20px, если контента мало.

Центральный блок должен растягиваться на всю высоту экрана, а не на высоту контента
Всем привет. Сразу к делу. Сайт делаю резиновым. Структура сайта по сути из трёх блоков. Шапка.

Как растянуть блок по высоте css

Для того, что бы растянуть блок на всю высоту страницы, можно выставить height у выбранного элемента и у всех его предков вплоть до html — 100%. Но обычно так не делают, вместо этого используются не процентные значения а, единицы относительной длины — vh и vw. Эти аббревиатуры можно расшифровать, как viewport height и viewport width — высота и ширина области просмотра соответственно. 1vh равен одному проценту от высоты области просмотра, 1vw равняется одному проценту от ширины области просмотра.

  class="all-height">

.all-height  background-color: #38d9a9; height: 100vh; width: 200px; >