Skip to content

Instantly share code, notes, and snippets.

@shiftgeist

shiftgeist/footer-at-bottom.html

Last active September 19, 2018 09:05
Download ZIP

Revisions

  1. Felix revised this gist Sep 19, 2018. 2 changed files with 0 additions and 0 deletions.
    0 footer-at-bottom-example.html → footer-at-bottom.html
    View file
    File renamed without changes.
    0 footer-at-bottom-style.scss → footer-at-bottom.scss
    View file
    File renamed without changes.
  2. Felix revised this gist May 4, 2018. 2 changed files with 0 additions and 0 deletions.
    0 body-example.html → footer-at-bottom-example.html
    View file
    File renamed without changes.
    0 style.scss → footer-at-bottom-style.scss
    View file
    File renamed without changes.
  3. Felix created this gist May 4, 2018.
    5 changes: 5 additions & 0 deletions body-example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <body>
    <header></header>
    <main>No matter what length</main>
    <footer>the footer will still be at the bottom or below #internetthesedays</footer>
    </body>
    9 changes: 9 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    body {
    display: flex; //give the body flex
    flex-direction: column; //reset flex to "normal" html
    min-height: 100vh; //minimum of 100% height (browser output window)
    }

    footer {
    margin-top: auto; //set footer to bottom or below main, when larger than 100% height
    }