Doing the opposite of CSS Sticky Footer

Question

I'm trying to do the reverse situation of StickyFooter: Footer should always be visible (it will overlap content), but should stick to the page content when the browser height exceeds the content (content will be a fixed height).

Basically, I want it to behave like position:fixed only when the browser height is smaller than content.

I have tried it through just CSS similarly to the way stickyfooter does (using max-height instead of min-height), but...

My problem: When the browser is smaller than the content, the footer sticks to the bottom initially, but then it doesn't keep sticking to bottom as you scroll. As shown here

I'm guessing there will be some javascript involved to keep it stuck to the bottom, but I haven't found a script that does this (and I don't know how to write one myself...)

Any help, suggestions, links would be very appreciated! Thanks.

HTML, BODY { height: 100%; 
   font-family: helvetica, arial; 
   font-size: 8pt;
   }
#wrapper {
   margin: 0 auto;
   width: 800px;
   position:relative;
   height:100%;
   max-height: 516px;
   }
#content {
   width:800px;
   height:400px;
   position: absolute;
   background: #999;
   border: 4px solid #000;
   }
#footer {
   height: 100px;
   position: absolute;
   bottom: 0;
   width: 800px;
   background-color: yellow;
   border: 4px solid #f90;
   }

Answer 1

Reverse Sticky-Footer? Hell yes.

All I did was analyze the site that OP provided and I came up with a jsFiddle demonstrating the absolute bare-minimum html/css required in order to achieve this effect:

jsFiddle

The important thing to note is that body needs a max-height property applied to it. Be careful because this can vary depending upon how much content it contains. I'll update my example soon with js to show how this can be done automatically.

Answer 2

you should add margin-bottom: 100px or more to the body class (which is the height of the footer) when the footer is positioned as fixed.