title: Position element at bottom of div
body: <p>Does anyone know a way to have a footer stuck to the bottom of a div like a <code>position: fixed</code> element. The methods I've found all stick it at the bottom of the starting view or at the bottom so you have to scroll all the way down to see them.</p>
  
  <p>I have tried setting the parent to <code>position:relative</code> and the child to <code>position: absolute</code>, and also using <code>display: table-cell</code> and <code>vertical-align: bottom</code>, but neither keep it stuck in place as you scroll, instead they leave it static at the bottom of the div or at the bottom of the default view.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.a{
    position:relative;
    background-color:#ccc;
    width:500px;
    min-height: 150px;
    max-height: 150px;
    overflow-y: scroll;
    float:left;
    padding:8px;
  }
  
  .footer{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    background-color:#666;
    color:#fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="a"&gt;
      Some content&lt;br /&gt;Some content&lt;br /&gt;Some content&lt;br /&gt;Some content&lt;br /&gt;Some content&lt;br /&gt;Some content&lt;br /&gt;Some content&lt;br /&gt;Some content&lt;br /&gt;Some content&lt;br /&gt;Some content&lt;br /&gt;Some content&lt;br /&gt;Some content&lt;br /&gt;Some content&lt;br /&gt;Some content&lt;br /&gt;Some content&lt;br /&gt;Some content&lt;br /&gt;Some content&lt;br /&gt;Some content&lt;br /&gt;Some content&lt;br /&gt;
      &lt;div class="footer"&gt;Some text&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>