0

So sticky footer has sometimes been problematic as I understand.

So I decided to make it more complicated, sigh!

Here is a solution to the standard bootstrap sticky footer Twitter Bootstrap 3 Sticky Footer

html, body {
    height: 100%;
}
/*Wrap to push footer down to bottom*/
 #wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px; /*footer-height*/
    padding: 0 0 60px;    /*footer-height*/
}
#footer {
    background-color: #440000;
    height: 60px;
    color: #ffffff;
}

But on some of my pages I might have something I would like to call a SupraFooter. A variable height added box of info that need to be thematically attached to the footer. So I need the same CSS to work with and without this addendum.

Problem is that even in footer height is fixed, this one isn't and sometimes it's not even represented. Putting it inside the "wrap" results in it being unattached.

http://jsfiddle.net/IngoVals/f39mQ/

Sadly its hard to see the problem in jsfiddle because of the small screen size. Any better hosting site for CSS related problems?

Any suggestions?

Community
  • 1
  • 1
Ingó Vals
  • 4,788
  • 14
  • 65
  • 113
  • Perhaps Flexbox is the answer, though it doesnt seem to wokr well with the JSfiddle embedded thingy. http://jsfiddle.net/IngoVals/z6PCF/3/ – Ingó Vals May 04 '14 at 12:59
  • I solved this using JavaScript to recalculate the footer on resize. I'm happy with that solution. – Ingó Vals Jul 02 '14 at 10:58

0 Answers0