Здесь рассмотрим варианты растягивания блока на 100% высоты родителя, для разных вариантов - если высота родительского блока известна и если нет. И, что часто бывает нужно при этом, центрирование содержимого блока.
В качестве примера возьмем вот такую разметку:
Здесь две колонки, знакомый вариант, если уже сталкивались с bootstrap. На всякий случай - начальный CSS:
Растягивание блока
Первый вариант. Растянуть блок по высоте окна.
Здесь все просто, ну почти. Есть известная высота окна, нужно ВСЕМ блокам, внутри которых находится нужный (div class="itm") назначить высоту 100%:
Не забывайте, что <html> - так же блок и ему можно задавать размеры. Что бы блок растянуть с помощью height: 100%, должна быть точно известна высота родителя. Если родитель сам назначается через height: 100%, то высота его родителя и т.д.
Второй вариант. В левом блоке есть некое содержимое, высота которого известна (например, некая картинка), в правом блоке небольшой текст с неизвестной высотой, может меняться. При этом необходимо правому блоку добавить фон, и этот фон по высоте должен соответствовать картинке в левом блоке. Как то так:
Вот три способа, как это сделать:
Первый. Если размер изображения из левого блока известен и не меняется, этот размер можно назначить правому блоку. Слишком просто, но..
Второй. Изображение может меняться, может измениться и размер, а высота нужна одинаковая и определенная. Можно назначить обоим блокам заранее определенную высоту, а изображение добавить фоном:
Третий. Используем display:flex
Здесь картинку так же лучше задать через background, на случай если колонка с текстом окажется больше
Центрирование содержимого
Представлю два варианта. Все тот же display: flex и вариант с псевдо-элементом before и свойством display: inline-block
Первый. Если решили использовать display: flex
Если внутри .itm2 один блок, он окажется по-центру, если несколько - будут растянуты по всей высоте .itm2. Вариант, согласитесь, очень удобный.
Второй. Использование display: inline-block. Здесь необходимо знать высоту .itm2, а так же все содержимое .itm2 нужно поместить в еще один блок (пусть будет просто блок с тэгом div)
В некоторых случаях блок может смещаться вниз, есть смысл добавить отрицательный отступ для псевдоэлемента. Обычно = -4px:
Пока все, если вспомню что полезное - допишу.