title: Scrollbar Free website layout in all resolutions using only CSS
body: <p>I have a strange requirement for a web application (single page web app) in which the page shouldn't have a scrollbar. The header &amp; footer stays sticky &amp; the middle content part should adjust(keeping proportion) without scrollbar in any resolution. Following is a preview of the layout. </p>
  
  <p><a href="https://i.stack.imgur.com/6yqwW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6yqwW.png" alt="enter image description here"></a></p>
  
  <p>Live Demo - <a href="https://previewin.xyz/web/sree/layout/" rel="nofollow noreferrer">https://previewin.xyz/web/sree/layout/</a></p>
  
  <p>CodePen Demo - <a href="https://codepen.io/DeCodeUI/pen/gZBXqa" rel="nofollow noreferrer">https://codepen.io/DeCodeUI/pen/gZBXqa</a></p>
  
  <p><strong>CSS</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>header {
    position: fixed;
    width: 100%;
    height: 50px;
    background: #333;
    z-index: 500;
    left: 0;
    top: 0;
  }
  
  footer {
    position: fixed;
    width: 100%;
    height: 50px;
    background: #333;
    z-index: 500;
    left: 0;
    bottom: 0;
  }
  
  #content {
    width: 80%;
    height: 100vh;
    padding: 60px 15px;
  }
  
  #grid {
    max-width: 900px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: space-around;
  }
  
  .grid-item {
    width: 300px;
    height: 100px;
    background: blue;
  }
  </code></pre>
  
  
  
  <p><strong>HTML Sample</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="page"&gt;
  
    &lt;header&gt;Text&lt;/header&gt;
  
    &lt;div id="content"&gt;
  
      &lt;div id="grid"&gt;
        &lt;div class="grid-item"&gt;&lt;/div&gt;
        &lt;div class="grid-item"&gt;&lt;/div&gt;
        &lt;div class="grid-item"&gt;&lt;/div&gt;
        &lt;div class="grid-item"&gt;&lt;/div&gt;
        &lt;div class="grid-item"&gt;&lt;/div&gt;
        &lt;div class="grid-item"&gt;&lt;/div&gt;
        &lt;div class="grid-item"&gt;&lt;/div&gt;
        &lt;div class="grid-item"&gt;&lt;/div&gt;
        &lt;div class="grid-item"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;footer&gt;Text&lt;/footer&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Those 9 grids in blue, always keep proportion in any resolution &amp; no scrollbars. I have tried my best &amp; the result is here - <a href="https://previewin.xyz/web/sree/layout/" rel="nofollow noreferrer">https://previewin.xyz/web/sree/layout/</a>  but when the screen get smaller, the grids won't resize. Any ideas to solve this?</p>