title: How to make position-fixed footer not cover all other elements of browser while its resizing?
body: <p>I decided to choose position: fixed as it covers the whole footer (without spaces); however, when I try to resize the page from bottom to top, the footer cover the content. I get that this is the idea of the fixed position to keep footer at the bottom but whether there is a way to make it look different? How can I prevent footer coverting the content? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      box-sizing: content-box; 
  }  
  
  section {
      padding: 20px 0px; 
  }
  
  
  #content {
      font-size: 20px;
      font-family: 'American Typewriter';
      text-align: center; 
  }
  
  
  .footer { 
      position: fixed;
      bottom: 0px;
      left: 0px;
      width: 100%;
      margin-left: 0px;
      margin-right: auto;
      display: block;
      user-select: none;
      -moz-user-select: none;
      -webkit-user-drag: none;
      -webkit-user-select: none;
      -ms-user-select: none;
  } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
      &lt;title&gt;Sample&lt;/title&gt;
      &lt;link href="index.css" rel="stylesheet" type="text/css" /&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;section&gt;
        &lt;div id="content"&gt;Lorem ipsum dolor sit amet, aperiam utroque pertinacia eam ut, quando voluptua eos te, vide animal 
              repudiare eu nec. Eum eligendi perfecto cu. Ne pri invenire accommodare complectitur. Cu legere regione epicurei cum, 
              usu no velit dicta mollis. Alia equidem eum eu. Sit ne dolore molestiae.
  
              Minim ludus in vim. Facer percipit nec cu. Aeterno indoctum conceptam an eam. Mea civibus fabellas an, ad sit tempor 
              everti noluisse, in latine conceptam quo.
        &lt;/div&gt;
      &lt;/section&gt;
  
        &lt;section&gt; 
          &lt;img src="http://www.durangobrewing.com/Images/Beer%20Pop%20Outs/DBC_Web_PopOut_paleAle_Footer.png" class="footer"&gt;
        &lt;/section&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/eZ2sA.png" rel="nofollow noreferrer">1</a></p>