title: Html/CSS: Content goes underneath a fixed footer
body: <p>The html page below contains a footer (position: fixed) and a "Sheet" (position: absolute).</p>
  
  <p>My problem: How to prevent the bottom end of the Sheet to be hidden underneath the footer when I scroll down? </p>
  
  <p>All my attempts with padding and margin failed ... (Please only html/css solutions.)</p>
  
  <p><strong>CSS</strong>   </p>
  
  <pre><code>   body {        
        background: green; }
  
     .Background {
        top: 0px; 
        right: 0px; }
  
     .Footer {
        position: fixed;
        bottom: 0;
        left: 0px;
        height: 30px;
        width: 100%;
        background: orange;
        padding: 0 10px 0 10px; }
  
     .Sheet {
        position: absolute;
        top: 100px;
        left: 25px;
        border-style: solid;
        border-width: 2px;
        padding: 20px; 
        background: red; }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div class="Background"&gt;
     Background&lt;/div&gt;
  
  &lt;div class="Sheet"&gt;
     &lt;div style="line-height: 200px"&gt;
     Sheet&lt;br&gt;
     Sheet&lt;br&gt;
     Sheet&lt;br&gt;&lt;/div&gt;
     Sheet&lt;br&gt;
     Sheet&lt;/div&gt;
  
  &lt;div class="Footer"&gt;
     Footer &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>