jeremypage · August 22, 2024 08:42
diff --git a/sticky-footer.html b/sticky-footer.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</title>
 	<style>
 		/* Sticky footer */

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

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

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

 		.scrollable {
 			flex: 1 0 auto;
 			padding: 1em;
 		}

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

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

 <body>
 	<div class="container">
 		<div class="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">
 			<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>
No results found