Skip to content

Instantly share code, notes, and snippets.

@jeremypage

jeremypage/sticky-footer-flexbox.html

Last active August 22, 2024 08:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jeremypage/fcb102112f7ef4c6456d226c2a54ce14 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jeremypage/fcb102112f7ef4c6456d226c2a54ce14 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jeremypage revised this gist Aug 22, 2024. 1 changed file with 27 additions and 13 deletions.
    40 changes: 27 additions & 13 deletions sticky-footer-grid.html
    View file
    Original file line number Diff line number Diff line change
    @@ -14,20 +14,12 @@
    }

    .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 */
    @@ -39,13 +31,24 @@

    header,
    footer,
    #main-article {
    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>

    @@ -54,10 +57,21 @@
    <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 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">
  2. jeremypage revised this gist Apr 10, 2024. 2 changed files with 71 additions and 1 deletion.
    2 changes: 1 addition & 1 deletion sticky-footer.html → sticky-footer-flexbox.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky footer</title>
    <title>Sticky Footer using CSS Flexbox</title>
    <style>
    /* Sticky footer */

    70 changes: 70 additions & 0 deletions sticky-footer-grid.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,70 @@
    <!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>
  3. jeremypage revised this gist Jan 2, 2022. 1 changed file with 8 additions and 8 deletions.
    16 changes: 8 additions & 8 deletions sticky-footer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -8,10 +8,10 @@
    <style>
    /* Sticky footer */

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

    @@ -20,18 +20,18 @@
    margin: 0;
    }

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

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

    .sticky {
    .sticky-footer__sticky {
    flex-shrink: 0;
    padding: 1em;
    }
    @@ -41,8 +41,8 @@
    </head>

    <body>
    <div class="container">
    <div class="scrollable">
    <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
    @@ -74,7 +74,7 @@ <h1>Sticky footer with Flexbox</h1>
    sint
    voluptatum facere.</p>
    </div>
    <footer class="sticky">
    <footer class="sticky-footer__sticky">
    <hr />
    <p>This is the footer</p>
    <p>
  4. jeremypage renamed this gist Dec 16, 2020. 1 changed file with 0 additions and 0 deletions.
    0 sticky-header-footer.html → sticky-footer.html
    View file
    File renamed without changes.
  5. jeremypage revised this gist Dec 16, 2020. 1 changed file with 59 additions and 68 deletions.
    127 changes: 59 additions & 68 deletions sticky-header-footer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,95 +6,86 @@
    <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 {
    html,
    .container {
    height: 100%;
    box-sizing: border-box;
    }

    /* Stop double-scrollbar bug */
    body {
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    margin: 0;
    }

    .scrollable {
    flex: 1 0 auto
    }

    .sticky {
    flex-shrink: 0
    }

    header.sticky {
    position: sticky;
    top: 0;
    }

    /* optional */
    body {
    font-family: Arial, Helvetica, sans-serif;
    }

    header,
    footer {
    background-color: #444;
    color: #fff;
    .container {
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    }

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

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

    header.sticky {
    margin: -0.5em;
    }
    /* End of sticky footer */
    </style>
    </head>

    <body>
    <div class="scrollable">
    <header class="sticky">
    <p>Header</p>
    <p>This always stays at the top and will not scroll off</p>
    </header>
    <h1>Sticky header and footer</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>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 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>
    <footer class="sticky">
    <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>

    </body>

    </html>
  6. jeremypage created this gist Sep 22, 2020.
    100 changes: 100 additions & 0 deletions sticky-header-footer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,100 @@
    <!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>
    body,
    html {
    height: 100%;
    box-sizing: border-box;
    }

    body {
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    margin: 0;
    }

    .scrollable {
    flex: 1 0 auto
    }

    .sticky {
    flex-shrink: 0
    }

    header.sticky {
    position: sticky;
    top: 0;
    }

    /* optional */
    body {
    font-family: Arial, Helvetica, sans-serif;
    }

    header,
    footer {
    background-color: #444;
    color: #fff;
    }

    .scrollable {
    margin: 0.5em;
    }

    .sticky {
    padding: 0.5em;
    }

    header.sticky {
    margin: -0.5em;
    }
    </style>
    </head>

    <body>
    <div class="scrollable">
    <header class="sticky">
    <p>Header</p>
    <p>This always stays at the top and will not scroll off</p>
    </header>
    <h1>Sticky header and footer</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>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">
    <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>
    </body>

    </html>