title: css height 100% is not always equal to the direct parent
body: <p>So I am just starting to learn some basic CSS and now I have come across some behavior I don't understand. I have a <code>&lt;div&gt;</code> inside an <code>&lt;article&gt;</code> and the <code>&lt;div&gt;</code>s height is set to 100%. Now if all the parents parents of the <code>&lt;div&gt;</code> have their height specified then the height is equal to the parents height, however when it is not the case then <code>&lt;div&gt;</code>s height is smaller.</p>
  
  <p>Here is a simple example when not all heights are specified:</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>html {
    height: 100%;
  }
  
  article {
    background-color: red;
    height: 100%;
  }
  
  #side-nav {
    background-color: blue;
    float: left;
    min-width: 10%;
    height: 100%;
    padding: auto;
    margin: 0;
  }
  
  #main-content {
    margin-left: 10%;
    width: 90%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;some title&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;nav id="top-nav"&gt;
        &lt;div id="main-nav-bar"&gt;
          &lt;a class="nav-bar-opt"&gt;opt1&lt;/a&gt;
          &lt;a class="nav-bar-opt"&gt;opt2&lt;/a&gt;
          &lt;a class="nav-bar-opt"&gt;opt3&lt;/a&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
      &lt;article id="article"&gt;
        &lt;div id="side-nav"&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a class="art-link"&gt;bullet&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class="art-link"&gt;point&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class="art-link"&gt;list&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div id="main-content"&gt;
          &lt;h1&gt;
            title
          &lt;/h1&gt;
          &lt;p&gt;
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sodales nulla a imperdiet. Ut interdum rhoncus luctus. Fusce porttitor eu nulla eu consectetur. Vivamus et pretium dolor, quis lobortis mauris. Quisque dignissim auctor nisl placerat placerat. Vivamus ultrices leo nec tincidunt ornare. Nulla accumsan euismod metus nec congue. 
          &lt;/p&gt;
          &lt;h3&gt;
            title
          &lt;/h3&gt;
          &lt;p&gt;
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sodales nulla a imperdiet. Ut interdum rhoncus luctus. Fusce porttitor eu nulla eu consectetur. Vivamus et pretium dolor, quis lobortis mauris. Quisque dignissim auctor nisl placerat placerat. Vivamus ultrices leo nec tincidunt ornare. Nulla accumsan euismod metus nec congue.
          &lt;/p&gt;
          &lt;ul&gt;
            &lt;li&gt;another&lt;/li&gt;
            &lt;li&gt;bullet&lt;/li&gt;
            &lt;li&gt;point&lt;/li&gt;
            &lt;li&gt;list&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/article&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>note that the <code>&lt;div&gt;</code>(colored in blue) is smaller than the direct parent <code>&lt;article&gt;</code>(colored in red).</p>
  
  <p>So now my question is if there is a reason for this behavior and if there is some workaround to avoid specifying all heights?</p>