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

Самое верное решение — использовать 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;
}