jeremypage · August 22, 2024 08:42
diff --git a/sticky-footer-flexbox.html b/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>
diff --git a/sticky-footer-grid.html b/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 {
            grid-row: 1 / 2;
        }

        .global-footer-container {
            grid-row: -2 / -1;
        }
        /* End CSS grid */

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

        header,
        footer,
        main {
            padding: 10px;
        }

        header,
        footer {
            text-align: center;
        }

        .global-main-container {
            background-color: #FFF;
        }

        .global-footer-container,
        header {
            color: #FFF;
            background-color: #004;
        }
    </style>
 </head>

 <body>
    <div class="global-main-container">
        <header role="banner">
            HEADER
        </header>
        <main role="main">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti voluptate nemo a iusto quisquam eum
                officia eligendi perspiciatis enim amet? Nemo iste eveniet, id dolorem hic beatae debitis iure quae.</p>
            <p>Molestias quasi delectus, voluptatibus soluta, nobis accusantium adipisci culpa odio laudantium omnis
                eaque cupiditate ipsum repudiandae corrupti dicta minus qui sed esse laboriosam aliquid! Rerum deleniti
                quis harum animi reiciendis.</p>
            <p>Dolores harum ab incidunt animi labore, provident deserunt veniam cum illum voluptatibus consequatur
                sequi, esse qui omnis veritatis dolorem neque minima magnam! Vitae numquam dolor cumque, possimus eius
                et cupiditate!</p>
            <p>Ab provident eveniet ratione vel perferendis ipsam suscipit, illo quo qui numquam dicta debitis harum.
                Adipisci a libero eveniet quidem. Iste dignissimos commodi maxime exercitationem sequi quia aliquam,
                laboriosam ducimus?</p>
            <p>Cupiditate consequuntur ullam exercitationem accusamus eaque pariatur aspernatur non adipisci ducimus
                optio, eligendi, repellendus inventore, aut quidem aliquam maiores a placeat quibusdam minima
                reprehenderit ab veniam. Optio, ipsam ex. Doloremque!</p>
        </main>
    </div>
    <div class="global-footer-container">
        <footer>
            FOOTER
        </footer>
    </div>
 </body>

 </html>