<body>
	<header>
		<h1>Header</h1>
	</header>
	<article>
		<h2>Article 1</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</p>
		<p>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.</p>
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</p>
		<p>Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.</p>
		<p>Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</p>
	</article>
	<footer>
		<p><sup>&copy;</sup>D.Fox</p>
	</footer>
</body>
<!-- https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b -->
/* Trick */
body {
	display: flex;
	flex-direction: column;
}
footer {
	margin-top: auto;
}
/* prettiness */
html,
body {
	font-family: Arial;
	height: 100%;
	margin: 0;
}
h1,
h2,
p {
	margin: 8px;
}
header {
	height: 80px;
	background: lightcyan;
}
footer {
	height: 50px;
	background: #ff9900;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.