title: Constrain body in HTML to height necessary to hold content for small page
body: <p>I have a webpage where the <code>background-color</code> for the <code>body</code> fills the browser window when the content is short. At times the content may be large and fill the browser window. Is there any way of controlling the <code>height</code> of the <code>body</code> to fit the content? I have tried setting the <code>height</code> of the <code>body</code> to <code>100%</code> and to <code>auto</code> but this does not help. Solutions that do not need <code>Javascript</code> are preferred. A minimal example is included:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en-CA&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;UTF-8&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
          &lt;meta http-equiv=&quot;X-UA-Compatible&quot;&gt;
          &lt;title&gt;Minimal Testcase for Body Height Sizing&lt;/title&gt;
          &lt;style&gt;
              html, body {
                  height: 100%;
              }
              body {
                  background-color: #f7fad4;
                  color: #262626;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;Test Heading&lt;/h1&gt;
          &lt;p&gt;Sample text&lt;/p&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>When I set the <code>height</code> of the <code>body</code> to <code>auto</code>, the <code>height</code> is correctly reported by the Chrome development tools, but the <code>background-color</code> overflows and fills the browser window. So the question becomes, how to prevent overflow of the <code>background-color</code>.
  `</p>