<div class="page-wrapper">
	<header>
		<strong>Header</strong>
	</header>
	<main contenteditable>
		<strong>Hi there, I am content. You can click on me and type some more content.<strong>
	</main>
	<footer>
		I am Footer. I belong Here.
		<br>
		<small><a href="https://twitter.com/jalajcodes">@jalajcodes</a></small>
	</footer>
</div>

html, body {
	color: white;
	text-transform: uppercase;
	text-align: center;
}

.page-wrapper {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
}

header {
	background: goldenrod;
	padding: 1rem;
}

main {
	background: blueviolet;
	color: white;
	padding: 1rem;
}

footer {
	background: indianred;
	padding: 1rem;
}

footer a {
	color: white;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.