Как растянуть на всю высоту?

Question

[rhost]

Как такое растянуть на всю высоту окна jsfiddle.net/wes33kqo ? (кроссбраузерно )

Comments

[Евгений Петров]

А что нужно растянуть? Непонятно.

[rhost]

Евгений Петров: ну... там сейчас такое вот joxi.ru/1bmoYoEhWPExAy.jpg надо как-то растянуть блок "main" по высоте и вместе с ним блоки "content" и "side-bar" , проще говоря чтобы футер был всегда внизу и все блоки тянулись до него вот)

Answer 1

[Евгений Петров]

Самое верное решение — использовать flex.
Увы, сразу сделаю оговорку, даже в IE11 элементы не растягиваются по высоте контейнера с display:flex, если у того указана минимальная высота min-height:100%.
Решение с flex

HTML

<div class="container">
	<div class="header"></div>
	<div class="main">
		<div class="content">
			<div class="block"></div>
			<div class="block"></div>
			<div class="block"></div>
			<div class="block"></div>
			<div class="block"></div>
		</div>
		<div class="sidebar"></div>
	</div>
	<div class="footer"></div>
</div>

CSS

html {
	background: #f6f6f6;
}
body {
	margin: 0;
}
html,
body,
.container {
	height: 100%;
}
.container {
	position: relative;
	min-width: 600px;
}
.header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 80px;
	background: #9c6;
}
.main {
	display: flex;
	box-sizing: border-box;
	min-height: 100%;
	margin: 0 0 -120px;
	padding: 80px 0 120px;
}
.content {
	flex-grow: 1;
	background: #ccf;
}
.sidebar {
	flex-basis: 200px;
	background: #f99;
}
.footer {
	height: 120px;
	background: #69c;
}
.content:before,
.content:after {
	content: "";
	display: table;
}
.block {
	width: 150px;
	height: 100px;
	margin: 10px;
	background: #f96;
}

По причине бага в IE, или полном отсутствии поддержки flex, приходится городить огород «по-старинке» с float и фоном в :before.
Решение с использованием float

HTML

<div class="container">
	<div class="header"></div>
	<div class="main">
		<div class="content">
			<div class="block"></div>
			<div class="block"></div>
			<div class="block"></div>
			<div class="block"></div>
			<div class="block"></div>
		</div>
		<div class="sidebar"></div>
	</div>
	<div class="footer"></div>
</div>

CSS

html {
	background: #f6f6f6;
}
body {
	margin: 0;
}
html,
body,
.container {
	height: 100%;
}
.container {
	position: relative;
	min-width: 600px;
}
.header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 80px;
	background: #9c6;
}
.main {
	position: relative;
	box-sizing: border-box;
	min-height: 100%;
	margin: 0 0 -120px;
	padding: 80px 0 120px;
}
.main:after {
	content: "";
	display: block;
	clear: both;
}
.content {
	float: left;
	width: 100%;
	margin-right: -200px;
}
.sidebar {
	float: right;
	width: 200px;
}
.content:before,
.sidebar:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 80px;
	bottom: 120px;
}
.content:before {
	left: 0;
	right: 200px;
	background: #ccf;
}
.sidebar:before {
	right: 0;
	width: 200px;
	background: #f99;
}
.footer {
	clear: both;
	position: relative;
	height: 120px;
	background: #69c;
}
.block {
	width: 150px;
	height: 100px;
	margin: 10px;
	background: #f96;
}

Answer 2

[Ленар Фаттахов]

height: 100vh

Comments

[rhost]

Что-то не помогает + ie8 не поймет)

[Сергей Мельников]

Роман: боюсь вас огорчить, но это безнадежный случай))

[rhost]

Сергей Мельников: в смысле?

[Евгений Петров]

Сергей Мельников: Это не так:)

[Сергей Мельников]

Роман: Евгений Петров: какой ie8? забудьте про него

[Евгений Петров]

Сергей Мельников: На макетах показана проблема с футером, потому я и написал, что одно правило не решит проблему.

Answer 3

[Ilya Korablev]

Емае, запомните!
height: 100vh;

Comments

[rhost]

Ilya Korablev почитайте выше)