title: Why does 100% height = 0px in this context?
body: <p>Given the following HTML:</p>
  
  <pre><code>&lt;div class='page-header'&gt;
      &lt;h1&gt;Header&lt;/h1&gt;
      &lt;div class="thingy"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the following CSS:</p>
  
  <pre><code>.page-header {
      background-color: blue;
      border: 5px solid green;
  }
  
  h1 {
      background-color: red;
      display: inline-block;
  }
  
  .thingy {
      float: right;
      height: 100%;
      width: 20px;
      background-color: yellow;
  }
  </code></pre>
  
  <p>Why is the <code>div</code> with <code>class='thingy'</code> not visible? </p>
  
  <p><img src="https://i.stack.imgur.com/Pgfvy.png" alt="Rendering of the above HTML. Yellow box is not visible."></p>
  
  <p><a href="http://jsfiddle.net/Ajedi32/r9Zx6/" rel="nofollow noreferrer">View in JSFiddle</a></p>
  
  <p>Changing to the height to a fixed value makes it visible, but that's not what I want. I want the element's height to scale with the height of the element it's in. How do I do that?</p>