Здесь рассмотрим варианты растягивания блока на 100% высоты родителя, для разных вариантов - если высота родительского блока известна и если нет. И, что часто бывает нужно при этом, центрирование содержимого блока.
В качестве примера возьмем вот такую разметку:
<!doctype html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="itm itm1">вот этот блок</div>
</div>
<div class="col-sm-6">
<div class="itm itm2">еще один блок</div>
</div>
</div>
</div>
</body>
</html>Здесь две колонки, знакомый вариант, если уже сталкивались с bootstrap. На всякий случай - начальный CSS:
body {background #ccc;margin: 0px;padding: 0px;}
.container {width:1200px;padding:0px 15px;}
.row {margin-left: -15px;margin-left: -15px;}
.row:after {display: block;content: '';clear: both;}
div {box-sizing:border-box;}
.col-sm-6 {padding: 0px 15px;float:left;}Растягивание блока
Первый вариант. Растянуть блок по высоте окна.
Здесь все просто, ну почти. Есть известная высота окна, нужно ВСЕМ блокам, внутри которых находится нужный (div class="itm") назначить высоту 100%:
html, body, .row, .row > div, .itm {height:100%;}Не забывайте, что <html> - так же блок и ему можно задавать размеры. Что бы блок растянуть с помощью height: 100%, должна быть точно известна высота родителя. Если родитель сам назначается через height: 100%, то высота его родителя и т.д.
Второй вариант. В левом блоке есть некое содержимое, высота которого известна (например, некая картинка), в правом блоке небольшой текст с неизвестной высотой, может меняться. При этом необходимо правому блоку добавить фон, и этот фон по высоте должен соответствовать картинке в левом блоке. Как то так:
Вот три способа, как это сделать:
Первый. Если размер изображения из левого блока известен и не меняется, этот размер можно назначить правому блоку. Слишком просто, но..
.itm2 {height:500px;background: #fff;padding:10px;box-sizing:border-box;}Второй. Изображение может меняться, может измениться и размер, а высота нужна одинаковая и определенная. Можно назначить обоим блокам заранее определенную высоту, а изображение добавить фоном:
.itm {height:500px;}
.itm1 {background: url(img.jpg);background-size: cover;}
.itm2 {background: #fff;padding:10px;box-sizing:border-box;}Третий. Используем display:flex
.row, .col-sm-6 {display:flex} /*в том числе, растянет внутренний блок*/
.itm2 {background: #fff;padding:10px;}Здесь картинку так же лучше задать через background, на случай если колонка с текстом окажется больше
Центрирование содержимого
Представлю два варианта. Все тот же display: flex и вариант с псевдо-элементом before и свойством display: inline-block
Первый. Если решили использовать display: flex
.itm2 {display:flex;align-items: center;flex-wrap: wrap;}Если внутри .itm2 один блок, он окажется по-центру, если несколько - будут растянуты по всей высоте .itm2. Вариант, согласитесь, очень удобный.
Второй. Использование display: inline-block. Здесь необходимо знать высоту .itm2, а так же все содержимое .itm2 нужно поместить в еще один блок (пусть будет просто блок с тэгом div)
.itm2:before {height:500px;content:'';display:inline-block;vertical-align:middle;}
.itm2 > div {display:inline-block;vertical-align:middle;background: #fff;padding:10px;}В некоторых случаях блок может смещаться вниз, есть смысл добавить отрицательный отступ для псевдоэлемента. Обычно = -4px:
.itm2:before {margin-right: -4px;}Пока все, если вспомню что полезное - допишу.
