title: How to position button at bottom of window with expanding content
body: <p>Going to try explain this the best I can. </p>
  
  <p>I want the submit button to always be at the bottom of the page. Now I know this can be achieved with <code>position: absolute, bottom</code> etc but there's a catch. </p>
  
  <p>If the content height is less than the wrapping div height, I want the button to display at the bottom of the window if that makes sense? </p>
  
  <p>If the content is longer than the wrapping div height then display at the bottom OF the content, not the window. </p>
  
  <p>Here is a <a href="https://jsfiddle.net/Lu3am0Lo/1/" rel="nofollow">JSFIDDLE</a> to show an example of the second condition working - I need help with the first condition</p>
  
  <pre><code>.container {
    height: 400px;
    width: 400px;
    background: red;
    overflow: scroll;
  }
  
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  li {
    height: 100px;
    background: blue;
    margin-bottom: 10px;
    color: white;
  }
  
  button {
    display: block;
    width: 100%;
    background: black;
    height: 40px;
    color: white;
  }
  </code></pre>