title: Align the footer at the bottom with variable content height
body: <p>So, I am trying to achieve this: <a href="https://i.stack.imgur.com/yVgvy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yVgvy.png" alt="enter image description here"></a></p>
  
  <p>I know this looks like an already asked question but I have tried all the available solutions of stackoverflow.</p>
  
  <p>My current structure is:
  HTML:</p>
  
  <pre><code>&lt;div class='app'&gt;
      &lt;div class='content'&gt;Content&lt;/div&gt;
      &lt;div class='footer'&gt;Footer&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.app{
      text-align: center;
      background-color: #1a1f25;
      min-height: 100%;
      width: 100%;
      position: relative;
      overflow-y: auto;
      top: 0;
  }
  .footer{
      color: lightgray;
      padding: 10px 30px;
      position: absolute;
      width: 100%;
      font-size: 10px;
      background: black;
      bottom: 0;
  }
  </code></pre>
  
  <p>Update: I tried checking the answer given <a href="https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b">here</a>, but my website is responsive and that answer is for those footers which have fixed height. Which makes it difficult to convert that solution for my usecase.</p>