Sticky footers without any wrappers

[lipis]

This approach is much cleaner, smaller and simpler to understand and it works with IE8+, Chrome, Safari, Firefox, Opera!

Here are the example in action without any #wrap divs:
sticky-footer-navbar
sticky-footer

---

That's the new CSS for sticky footers without the #wrap looks like this:

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

This solution was found here: http://mystrd.at/modern-clean-css-sticky-footer/ and of course all the credit goes there!

[mdo]

And Mobile Safari and Chrome for Android?

[lipis]

Chrome/Safari on iPad (iOS7) and Chrome on Android (N5) are also good.. no extra scroll bars and work as expected for bigger contents..

[boulox]

Just check it out on Android chrome with galaxy S4 looks great

[lipis]

This one is also fixing the issue #12600

[vanhumbeecka]

Too bad that my original files are broken with the new version of bootstrap.
(the wrap-and-push method for sticky footer).

No backwards compatiblity?
Than I'll have to downgrade my bootstrap version in my project..

[mdo]

Generally speaking we don't stick to things too closely for the example files as they are outside the core CSS and JS. That said, there's really not much different between this version and the previous.