title: How to set body height with JavaScript?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.body.height = document.getElementById("page-main").clientHeight + 400;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#page-main {
      position:absolute;
      width:100%;
      height:2000px;
      z-index:2;
      background:#eeeeee;
  }
  
  #footer {
      position:fixed;
      width:100%:
      bottom:0px;
      height:400px;
      z-index:1;
      background:#aaaaaa;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  
  &lt;div id='page-main'&gt;main&lt;/div&gt;
  
  &lt;div id='footer'&gt;footer&lt;/div&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have a footer div with <code>position: fixed; bottom: 0px;</code> and a main content div with <code>position: absolute;</code>. </p>
  
  <p>Basically the idea is to have the main content div act like a sheet of paper on top of the static background of the document, so you would scroll through the content of the page and when you get to the bottom you would need to be able to scroll a couple hundred more pixels to reveal the footer div below the main content div.</p>
  
  <p>I allowed this in my landing page by finding out the height of the body necessary to facilitate this extra space at the bottom and setting the height using <code>height: 1720px;</code> on the body itself. However, I'd like to implement this in a way that it does not need to be constant, as I fear browsers and devices may have different rendered heights for the main content div and I'd like to use this on multiple pages without having to individually hard code  the body height.</p>
  
  <p>I tried using JavaScript to find the height of the main content div (using clientHeight, which seems to work perfectly) and add a couple hundred pixels to that number for the height of the body as follows:</p>
  
  <pre><code>document.body.height = document.getElementById("page-main").clientHeight + 400; 
  </code></pre>
  
  <p>and also tried changing the following:</p>
  
  <pre><code>document.body.style.height
  document.body.style.paddingBottom
  </code></pre>
  
  <p>This does not change the height of the body at all. I tried using a similar approach to change the body's background to red, which works, but for some reason it just refuses to change the height specifically. I've tried placing this script in the head, above the body, and at the end of the body. Doesn't help. Finding the clientHeight of the main content div works fine, adding 400 to that number seems easy enough, and I know the document definitely has a body, so I'm very confused as to why it could possibly be that JavaScript refuses to change the height of the body.</p>
  
  <p>I've checked the console in Edge and Chrome and it seems there's no issue, so I'm completely lost here. Normally I can find answers online and I've never had to ask for help but at this point I feel like it's such a simple question and I have no idea why it won't work.</p>
  
  <p>Sorry if this question is't written well, but does anybody have an idea of why JavaScript might not be allowing the changing of the height of the body?</p>
  
  <p>TL;DR:</p>
  
  <ul>
  <li><p>content div is positioned absolute and can change depending on scenario</p></li>
  <li><p>footer div is positioned static on the bottom and is supposed to be revealed below the content div by allowing user to scroll a couple hundred pixels below the end of the content div</p></li>
  <li><p>I want to achieve this by altering the height of the body, which works perfectly through hardcoding in html but for some reason JavaScript refuses to change the height of the body</p></li>
  </ul>