Оценок: 1

Растянуть блок на высоту родителя и центрировать содержимое

Расширить блок по высоте родителя, центрировать содержимое

Здесь рассмотрим варианты растягивания блока на 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: