Sticky Footer at bottom of PAGE, not just bottom of WINDOW
I have been searching online for a few days now trying to crack this: My code approx layout: <body> <div id="wrapper"> <div id="top-header"></div> <!-- This is a fixed position header --> <div id="content"></div> <div id="footer"></div> </div> </body> I'm trying to make my footer so it works in the following two scenarios: 1) When there is little/no content the footer sits at the bottom of the screen (to avoid ugly/unprofessional-looking gaps) 2) When the content overfills the page (requiring a scrollbar), the footer is at the bottom of the PAGE (ie: is initially hidden until you scroll down). Unsuccessful FIX #1 So far, I have tried using position:fixed, which works in scenario (1) but in scenario (2), the footer is always visible (in its fixed position at the bottom of the window), which I don't want. I only want to be able to see the footer when I scroll to the bottom. Unsuccessful FIX #2 I then found a little more success by absolutely position the footer relative to the 'wrapper' div (which had a min-height:100%). In scenario (1) this worked fine! But when I tried scenario (2), the footer would appear absolutely at the bottom of the "window" but not the bottom of the "page" (or more specifically the 'wrapper' div). When I would then scroll down, the footer would move with the page and cut across the content - very strange! ...... It seems the problem is arising because the height of the 'wrapper' is relative to the window size (height:100%) and this varies in real-time as I change the window size. Is there a way I can state the height of the 'wrapper' div to be 100% of the 'page' rather than 100% of the 'window'? If you think there is a better method or need to see the source code, please let me know... I will happily provide. I have posted this question because even after following several detailed instructions to fix it, and searching in the archived threads on this site, I have been unsuccessful. Any help would be most appreciated. JMSSTKS
Sticky slick slider element hidden when position fixed
Why “POSITION:RELATIVE” messes up things?
div containing absolute img has zero height
Need static menu when overflow-x:scroll
How can I put a section under cross-fade background section
Content div nex to fluid fixed div
Where does this distance difference come from
Absolute position relative to some arbitrary element
Relative positioning of custom controls with OpenLayers 3
How to set div height with relative position as child div with absolute position using css?
I'm trying to put a fixed divsion at the top of the page but when I scroll with FF, lines are lost
fixed position z-index not working
how to create adjustable gap between elements (div)
How to properly apply a css hack for IE11 transition misbehaviour
How do you make leaflet popup window full screen on small screens?
Fix a div to the bottom while scrolling with skrollr