<!DOCTYPE html>

<html>

<head>

	<title>Ma mise en page</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

	<header>Balise header</header>

	<main>
		<section>Ma section</section>
		<section>Ma section 2</section>
	</main>

	<footer>Balise footer</footer>

</body>

</html>
html, body {
	background-color: orange;
	margin:0;
	padding:0;
	position: relative;
}

header {
	background-color: #FFFFFF;
	height: 100px;
	width: 100%;
}

main {
	min-height: 100vh;
	padding-bottom: 150px;
}

section {
	background-color: red;
	min-height: 500px;
	min-width: 500px;
	margin-left: 120px;
	margin-right: 120px;
}

footer {
	position: absolute;
	background-color: rgba(255,255,255,0.8);
	bottom: 0;
	left: 0;
	height: 100px;
	width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.