title: Div elements are not expanding to size of their parent container
body: <p>I am attempting to create a simple webpage using React. I want to have a fixed navbar at the top of the screen and then content below it. My general structure is one in which there is a single div in the body, which is where the React application is "injected". The application itself consists of a top-level "app" div, and various child components.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
     &lt;title&gt;Sample App&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="react"&gt;
      &lt;/div&gt;
    &lt;/body&gt;
    &lt;script src="/build/bundle.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The issue Im having is that the div with the id 'react' is not filling the entire body of the html page. Therefore any content I have inside of my application div overflows outside of the 'react' div. </p>
  
  <p>This code pen illustrates my problem: <a href="http://codepen.io/anon/pen/xGNejM" rel="nofollow">http://codepen.io/anon/pen/xGNejM</a></p>
  
  <p>You can see at the bottom of the page that the lime background applied to the html tag is bleeding through. It is as if the body tag is not filling the whole screen. I thought setting height to 100% on html and body would handle this, but apparently not. </p>