title: Push down the footer as content grows
body: <p>I have these two illustration for the issue I need to fix:</p>
  
  <ol>
  <li>Footer is relative and pushed down as textarea grows, but there is a
  whitespace below the footer</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/wmZhX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wmZhX.png" alt="enter image description here"></a></p>
  
  <ol start="2">
  <li>Footer is absoluted and is just right in the bottom of the page but it is not pushed down as content (textarea) grows</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/m98WH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m98WH.png" alt="enter image description here"></a></p>
  
  <p>The code for the footer &amp; content is:</p>
  
  <pre><code>.content {
      padding-bottom: 124px;
      position: relative;
  }
  
  .footer{
      width: 100%;
      height:124px !important;
      margin: 0px auto;
      padding-top: 20px;
      padding-bottom: 40px;
      position: relative !important;
      bottom: 0px; !important;
      left: 0px;
  }
  </code></pre>
  
  <p>The question is how can I make that the footer stays at the bottom even when the content is not full, while as content grows it should be pushed down further.</p>