Can't get a sticky footer working for the life of me

Question

I've tried every CSS-only implementation of sticky footers that exist on the internet it seems, and for the life of me I cannot figure out why it's not working for me.

The problem code is here: https://jsfiddle.net/7ck2xk2p/1/

So the problem is footer is still just sitting under the content, and is not stuck to the bottom of the page.

As you might be able to see, my most recent attempt was the technique detailed here by Ryan Fait

* {
margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

I am very new, so if things are messy in that fiddle please excuse me. The relevant details should still be distinguishable though.

What am I doing wrong?

Answer 1

you can use this approach for sticky footer (CSS only)

html,
body {
  height: 100%;
  margin: 0;
}
div {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -70px
}
div:after {
  content: "";
  display: block
}
footer,
div:after {
  height: 70px
}
footer {
  background: green
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dictum vel dolor vel commodo. Nam id nisi eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi commodo leo ac enim molestie, vitae sodales
  dolor consequat. Donec imperdiet orci at luctus lacinia. Donec bibendum velit sed risus eleifend ultricies. Sed nisl massa, ornare quis augue et, faucibus feugiat sapien. Vestibulum pharetra tempor quam eu congue. Proin posuere lorem quis nisl efficitur
  aliquam. Curabitur elit ex, convallis sed fringilla a, varius quis dui. Nullam eget est sed orci imperdiet imperdiet sit amet eget dui. Integer egestas nisi a sagittis rutrum. Quisque id convallis nisl, at blandit nunc. Curabitur elementum viverra tristique.
  In auctor pretium mattis. Fusce vulputate porta lacus tincidunt rhoncus. Aenean dapibus tortor non faucibus laoreet. Morbi fringilla leo nisl, imperdiet hendrerit elit semper at. Donec suscipit orci in nulla viverra ultrices. Donec aliquet risus non
  libero viverra, sed aliquam massa congue. Aliquam suscipit ullamcorper erat sed vehicula. Donec elementum tincidunt dolor, non scelerisque dolor pretium ut. Praesent vitae porttitor turpis, et pharetra libero. Sed imperdiet tempor facilisis. Cras eget
  vehicula dolor.
</div>
<footer>
  Sticky Footer.
</footer>