title: How can I pin a div to always appear at the bottom of a page, no matter the content length?
body: <p>I'm trying to keep my footer down no matter the size of the page. But it gets thrown about when about div encroaches. I want it to display over the about content but for the about content to be scrollable it's too big to display.
  Here's the code</p>
  
  <p><a href="https://jsfiddle.net/wildtypitch/e3mom7fz/" rel="nofollow noreferrer">fiddle</a></p>
  
  <pre><code>.footer {
  background-color:#FFF;
  width: 100%;
  border-top: 1px solid #ccc;
  padding-top: 1em;
  height: 140px; 
  display: block;
  
  .about {
  font-family: HindMedium;
  font-size: 13px;
  min-width: 800px;
  text-align: left;
  width:100%;
  min-height: 100%;
  margin-bottom: -140px; 
      }
  </code></pre>