title: How to make the div contents fit into the parent div with height 100%?
body: <p>I looked through many posts and still can't get this one to work...</p>
  
  <p>My goal is <strong>to style css only (no javascript) so that the height of DIV class "two" always fit into the DIV class "container".</strong></p>
  
  <p>The container DIV's height could change like window resize that is why I would like my "two" DIV to be able to change the size accordingly. So I set the container DIV height to 300px here but it could be any px like 500px etc</p>
  
  <p>Please let me know if you need more clarification. Thanks in advance!</p>
  
  <p><a href="http://jsfiddle.net/pn9Qa/" rel="nofollow">http://jsfiddle.net/pn9Qa/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class='container'&gt;
      &lt;div class='top'&gt;some text&lt;/div&gt;
      &lt;div class='bottom'&gt;
          &lt;div class='one'&gt;header&lt;/div&gt;
          &lt;div class='two'&gt;items here&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.container
  {
      height: 300px;
      width: 100%;
      border: 3px solid red;
  }
  .top
  {
      height: 60px;
      width: 100%;
      background-color:pink;
      float:left;
  
  }
  .bottom
  {
      width: 100%;
      height: 100%;
      background-color: green;
      float: left;
  }
  .one
  {
      width: 100%;
      height: 30px;
      background-color: orange;
  }
  .two
  {
      width: 100%;
      height: 100%;
      background-color: yellow;
      overflow: auto;
  }
  </code></pre>