Как прижать футер к дну?

Question

megorit @EgoRusMarch

C++ Developer

HTML
CSS

Как прижать футер к дну?

В общем, не знаю как сделать.
У меня content и header стоят в position: absolute, а для того, чтобы прижать, нужно сделать footer в position: relative.

Вот код:

<!DOCTYPE html>
<html>

<head></head>

<body>

	<header>
		<div class="header">
		</div>
		<div class="logo">
			<img src="">
		</div>
	</header>

	<div class="content">
		<p>text</p>
	</div>

	<footer>
		<div class="footer">
			<div class="contacts-1">
				<ul>
				</ul>
			</div>
			<div class="contacts-2">
				<ul>
				</ul>
			</div>
		</div>
	</footer>

</body>

</html>

/*▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ╔══════╗ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒*/
/*▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ║ MAIN ║ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒*/
/*▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ ╚══════╝ ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒*/

/*╠═════════════════════════════ HTML ═════════════════════════════╣*/

* {
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
	background-color: #e2e9f5;
}

body { overflow-y: scroll; }

::selection {
	color: #fff;
	background: #006f99;
}

/*╠════════════════════════════ HEADER ════════════════════════════╣*/

div.header {
	position: absolute;
	top: 40px;
	left: 10%;
	height: 94px;
	width: calc(80% - 6px);
	background-color: #365595;
	border-radius: 10px;
	border-color: #95aedc;
	border-style: solid;
	border-width: 3px;
}

div.logo {
	position: absolute;
	top: 7px;
	left: calc((100% - 160px - 6px) * 0.5);
	height: 160px;
	width: 160px;
	background-color: #365595;
	border-radius: 100%;
	border-color: #95aedc;
	border-style: solid;
	border-width: 3px;
	z-index: 1;
}

div.logo>img {
	height: 140px;
	margin: 8px 14px;
}

/*╠════════════════════════════ FOOTER ════════════════════════════╣*/

div.footer {
	position: absolute;
	bottom: 0;
	left: 10%;
	height: 147px;
	width: calc(80% - 6px);
	background-color: #365595;
	border-radius: 10px 10px 0 0;
	border-color: #95aedc;
	border-style: solid;
	border-width: 3px 3px 0px 3px;
}

div.contacts-1>ul, div.contacts-2>ul {
	position: absolute;
	top: 20px;
	left: 50px;
	list-style: none;
	color: white;
}

div.contacts-1>ul { left: 50px; }

div.contacts-2>ul { left: 400px; }