jmosbech/centered-with-footer.html

## centered-with-footer.html
<!DOCTYPE html>
<html>

<head>

<style>
html {overflow-y: scroll;}
body, html {height: 100%; padding:0; margin:0;}
#main {
  min-height: 440px;
	height: 100%;
}

header {
	width: 100%;
	line-height: 100px;
	background: grey	;
}

footer {
	line-height: 100px;
	background-color: black;
	color: white;
	width: 100%;
	margin-top: -100px;
}

#roulette {
	height: 200px;
	width: 400px;
	position: absolute;
	top: 50%;
	left:50%;
	margin-top: -100px;
	margin-left: -200px;
	background-color: red;
}

@media screen and (max-height: 420px) {
	#roulette {top: 220px; background-color: blue;}
}

</style>

</head>

<body>

	<div id="main">
		<header>header</header>
		<div id="roulette"></div>
	</div>

	<footer>footer</footer>

</body>
</html>