title: Scrolling and Non-Scrolling versions of a single page app
body: <p>I am writing a single-page app in React. All pages in this app have a header and some content. The header is fixed and the content is scrollable. To do this, I am setting the height to <code>100%</code> starting from the <code>&lt;html&gt;</code> tag down to the <code>&lt;Page&gt;</code> component. The <code>&lt;Page&gt;</code> component itself is a flexbox with a fixed-height header and the content area is set up with <code>flex: 1</code> and <code>overflow: auto</code> to allow for scrolling. Here's a simplified structure of the app using only HTML and CSS:</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>    * {
          box-sizing: border-box;
      }
  
      html {
          height: 100%;
      }
  
      body {
          height: 100%;
          margin: 0;
          font-family: Arial, Verdana, Helvetica, sans-serif;
      }
  
      .scrolling-page {
          height: 100%;
          display: flex;
          flex-direction: column;
      }
  
      .header {
          background-color: #eeeeee;
          height: 50px;
          font-size: 24px;
          line-height: 34px;
          padding: 8px;
      }
  
      .content {
          flex: 1;
          overflow: auto;
          padding: 8px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="scrolling-page"&gt;
  &lt;header class="header"&gt;
      Header
  &lt;/header&gt;
  &lt;div class="content"&gt;
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur
      mollitia maxime facere quae cumque perferendis cum atque quia
      repellendus rerum eaque quod quibusdam incidunt blanditiis possimus
      temporibus reiciendis deserunt sequi eveniet necessitatibus maiores quas
      assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque
      dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa
      cupiditate cum architecto! Facilis deleniti unde suscipit minima
      obcaecati vero ea soluta odio cupiditate placeat vitae nesciunt quis
      alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui
      nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur
      vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
      alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui
      nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur
      vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would like to now create a version of the same page that does not scroll and occupies only the height needed by the page, not 100% of the page. This requires the removal of <code>100%</code> heights starting from the <code>&lt;html&gt;</code> tag down. However since this is a single-page app, I can't have it both ways. There is only one instance of <code>&lt;html&gt;</code>, <code>&lt;body&gt;</code> etc. Do you see any way around this?</p>