title: why is child's div height exceeding body
body: <p>in my html, I have something like</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id = "main"&gt;
              &lt;div&gt; I'm 500px tall&lt;/div&gt;
              &lt;div&gt; I'm xxxpx tall&lt;/div&gt;
          &lt;/div&gt;            
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>and my css is like</p>
  
  <pre><code>head, body, #main{
      height:100%;
      width: 100%;
  }
  
  otherDivs{
      height: some number of px
  }
  </code></pre>
  
  <p>display for everything are either block or inline, there is no float</p>
  
  <p>positioning are either absolute or relative</p>
  
  <p>and what happened was that the #main (&amp;body&amp;html which wraps it) height was not full page height (only around 2/3 of page height), and some divs contained in the #main actually exceed the main's height</p>
  
  <p>I had this fixed by changing height:100% to min-height:100%
  but could not understand why the elements would exceed their parent divs height, I'm 100% sure all height of the children divs are declared in px, would't #main automatically wrap them?</p>