How to create a sticky footer in CSS inside an absolutely positioned div?

Question

I would like to create a sticky footer inside an absolutely positioned div element.

My approach was to position the footer div absolutely as well - inside an ad

Answer 1

change CSS

    .page{height: 100%;}
  .page-inner {
    margin-bottom:-30px;
    min-height: 100%;


  }
  .page-inner:after{height:30px;
  content: "";
  display: block;
}
  .footer {
    height: 30px;
    color: brown;
    border: 1px solid brown;
  }

https://jsfiddle.net/8nrukse9/5/