<div class="my-fancy-pants-content">
  <h1>Weird, never use in the real world way of doing a half working sticky footer in firefox and safari</h1> 
  <a href="http://caniuse.com/#feat=css-sticky">Can I use?</a>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores suscipit odio, id cum vitae dignissimos sapiente saepe nesciunt quaerat, ratione et eius magni facere laborum, doloribus perspiciatis. Laboriosam, excepturi, tenetur.</p>
<footer class="my-sticky-footer">
  <p>Just hanging out down here</p>
html, body {
  height: 100%;

.my-fancy-pants-content {
  width: 750px;
  margin: 0 auto;
  font-size: 18px;
  min-height: 100%;

h1 {
  color: red;

.my-sticky-footer {
  text-align: center;
  background: blue;
  color: #fff;
  padding: 20px; 
  position: sticky;
  bottom: 0;
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.