jeremypage/sticky-footer-flexbox.html

## sticky-footer-flexbox.html
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Sticky Footer using CSS Flexbox</title>
	<style>
		/* Sticky footer */

		/* 100% height for all parent elements from .sticky-footer__container upwards */
		body,
		html,
		.sticky-footer__container {
			height: 100%;
		}

		/* Stop double-scrollbar bug */
		body {
			margin: 0;
		}

		.sticky-footer__container {
			overflow-x: hidden;
			display: flex;
			flex-direction: column;
		}

		.sticky-footer__scrollable {
			flex: 1 0 auto;
			padding: 1em;
		}

		.sticky-footer__sticky {
			flex-shrink: 0;
			padding: 1em;
		}

		/* End of sticky footer */
	</style>
</head>

<body>
	<div class="sticky-footer__container">
		<div class="sticky-footer__scrollable">
			<h1>Sticky footer with Flexbox</h1>
			<p>Inspired by the article on <a
					href="https://css-tricks.com/couple-takes-sticky-footer/#there-is-flexbox">CSS
					Tricks</a>.</p>
			<p>See also on <a href="https://codepen.io/chriscoyier/pen/RRbKrL">Codepen</a></p>
			<p>This is the main content, which scrolls as normal.</p>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae non fugit molestias rerum ipsa recusandae
				exercitationem voluptatibus ex necessitatibus id quasi, esse porro mollitia, in nam nihil iusto amet
				molestiae!</p>
			<p>Esse ut pariatur possimus rem tempora adipisci placeat error? Totam commodi veniam reprehenderit
				praesentium
				cupiditate earum nobis, nostrum, voluptatum soluta sapiente doloremque quam est repudiandae quisquam
				eligendi! Eius, excepturi unde.</p>
			<p>Explicabo eos consequatur mollitia cupiditate doloremque velit voluptates vel quia placeat voluptatum,
				distinctio ipsa laudantium accusantium corporis nisi soluta ratione cumque incidunt culpa iure autem
				nostrum
				repellat ipsum omnis! Corrupti?</p>
			<p>Reprehenderit facilis mollitia, inventore possimus atque quidem id impedit maiores, explicabo error
				obcaecati
				quia ipsa vero. Autem voluptas asperiores hic repudiandae sed aperiam veritatis illum laborum. Est sequi
				rerum maxime?</p>
			<p>Iusto non et aspernatur illo? Reprehenderit, accusamus dolorum. Aspernatur quo quisquam enim sed
				consequuntur
				maiores eveniet tempora illo fugiat magnam atque ipsam consectetur odio, natus quos distinctio molestias
				nesciunt nam!</p>
			<p>Expedita quas natus labore porro nihil soluta odio perferendis reiciendis aliquam excepturi fuga
				veritatis,
				rem mollitia earum enim eveniet doloribus eius adipisci minima molestiae. Laboriosam omnis inventore
				sint
				voluptatum facere.</p>
		</div>
		<footer class="sticky-footer__sticky">
			<hr />
			<p>This is the footer</p>
			<p>
				It sticks to the bottom if main content does not fill the page
			</p>
			<p>
				It scrolls off the bottom if main content is bigger than the page
			</p>
		</footer>
	</div>

</body>

</html>

## sticky-footer-grid.html
<!DOCTYPE html>
<html lang="en-GB">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Footer using CSS Grid</title>
    <style>
        /* CSS grid */
        body {
            display: grid;
            height: 100vh;
            grid-template-rows: 1fr auto;
        }

        .global-main-container {
            background-color: #FFF;
            grid-row: 1 / 2;
        }

        .global-footer-container {
            color: #FFF;
            background-color: #004;
            grid-row: -2 / -1;
        }

        header {
            color: #FFF;
            background-color: #004;
        }
        /* End CSS grid */

        /* Supplementary styling */
        body {
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 20px;
        }

        header,
        footer,
        #main-article {
            padding: 10px;
        }
        header,
        footer {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="global-main-container">
        <header role="banner">
            HEADER
        </header>
        <main id="main-article" role="main">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora ut commodi nemo eveniet.
                Aperiam repellendus, eaque, amet quidem nostrum facere exercitationem dolor illum
                corporis recusandae neque eos, iusto minus aut.</p>
        </main>
    </div>
    <div class="global-footer-container">
        <footer>
            FOOTER
        </footer>
    </div>
</body>

</html>