Created
March 19, 2016 21:44
-
-
Save denised/c5c9a0359e396c1af538 to your computer and use it in GitHub Desktop.
Simple css to for sticky footer or fixed header/footer *independent of footer size*. (Applies to wordpress as well as other sites).)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* There are a lot of 'sticky footer' implementations out there, but they | |
| * almost always require you to know the size of your footer in advance. | |
| * Or they rely on some trick like display: table-row, whatever that really | |
| * does. And most "fixed" header/footer implementations cause | |
| * scrolling of the main body to be unintuitive (try to page forward and | |
| * it goes too far, putting text you haven't seen yet under the header) | |
| * | |
| * This implementation is: | |
| * (1) Very direct and 'semantic', i.e. No tricks. It uses | |
| * flex display which is by now well supported. | |
| * (2) Allows you to size your header/footer however --- even dynamically! | |
| * (3) Requires a minimum of extra divs: If you want to scroll the main body | |
| * with fixed header/footer you need one extra level of div to achieve that. | |
| * | |
| * The css below is written to the standard Wordpress page hierarchy shown below, | |
| * but of course you can change it to suit your needs. | |
| * | |
| * Wordpress standard page hierarchy: | |
| * <body> | |
| * <div class='site'> | |
| * <header class='site-header'> | |
| * <div class='site-content'> | |
| * <div class='content-area'> | |
| * <main class='site-main'> | |
| * <aside> | |
| * <footer class='site-footer'> | |
| * | |
| * NB: I haven't tested a ton out of this implementation yet; I will update as I find bugs. | |
| * If you find bugs, please let me know. | |
| */ | |
| /* Basic header/footer placement choices. Uncomment one, or create a new one | |
| */ | |
| /* Style 1: Header and footer scroll with page, but the footer 'sticks' to the bottom of short pages. */ | |
| .site { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: stretch; | |
| height: 100%; | |
| min-height: 100vh; | |
| overflow-y: scroll; | |
| } | |
| .site-content { | |
| flex: 1 0 auto; | |
| } | |
| /* Style 2: Fixed header and footer, and the content scrolls between them */ | |
| /* | |
| .site { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: stretch; | |
| height: 100%; | |
| min-height: 100vh; | |
| max-height: 100vh; | |
| } | |
| header, footer { | |
| flex: none; | |
| } | |
| .site-content { | |
| position: relative; | |
| flex: 1 0 auto; | |
| overflow-y: hidden; | |
| } | |
| .content-area { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| overflow-y: scroll; | |
| } | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment