<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- this is an example from the MDN Layout Cookbook -->
<title>CSS Cookbook: sticky footer</title>
<link rel="stylesheet" href="styles.css">
<style>
html {
height:100%;
box-sizing: border-box;
}
body {
height:100%;
background-color: #fff;
color: #333;
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
}
* {
box-sizing: inherit;
}
section {
height: 100%
}
.wrapper {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
.page-header,
.page-footer {
background-color: rgb(75, 70, 74);
color: #fff;
padding: 20px;
}
.page-body {
padding: 20px;
}
</style>
</head>
<body>
<section>
<div class="wrapper">
<header class="page-header">This is the header</header>
<main class="page-body">
<p>Main page content here, add more if you want to see the footer push down.</p>
</main>
<footer class="page-footer">Sticky footer</footer>
</div>
</section>
</body>
</html>