title: Make child div height to 100% of parent div
body: <p>I have searched all over google, stackoverflow and other forms and websites yet I cannot find a solution. None of what I found worked for me.</p>
  
  <p>(Question related Website: <a href="http://rikahiyuka.com" rel="nofollow">http://rikahiyuka.com</a> )</p>
  
  <p>Abbreviations:</p>
  
  <p><code>#DivC</code> is the content box to the left under the header and above the footer.</p>
  
  <p><code>#DivSB</code> is the content box to the right under the header and above the footer.</p>
  
  <p><code>#DivWC</code> is the container of both <code>#DivC</code> and <code>#DivSB</code> which is invisible.</p>
  
  <p>My HTML structures looks like this:</p>
  
  <pre><code>&lt;div id="WC"&gt;
      &lt;div id="SB"&gt;...&lt;/div&gt;
      &lt;div id="C"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Notes:</p>
  
  <p><code>#DivWC</code> height will automatically resize to the longest div out of <code>#DivC</code> and <code>#DivSB</code> (using <code>overflow:hidden</code>)</p>
  
  <p><code>#DivSB</code> has <code>float:right</code> CSS property.</p>
  
  <hr>
  
  <p>I am trying to make it so that <code>#DivC</code> will automatically resize to <code>#DivWC</code> height.
  I want to do the same for <code>#DivSB</code> so that if either <code>#DivC</code> or <code>#DivSB</code> is taller, <code>#DivWC</code> will have the height of the tallest box, then the other box (shorter box from <code>#DivC</code> or <code>#DivSB</code>) will resize to <code>#DivWC</code> height.</p>
  
  <p>Setting all parent elements to <code>height:100%</code> caused the content box to have an height of 100 viewpoint height.</p>
  
  <p>I have tried using <code>display:table</code> and <code>display:table-row</code> and <code>display:table-cell</code> but those completely destroy the layout.</p>
  
  <p>I have seen a few uses of absolute positioning, but from what I know, absolute positioning is ignored by other elements, so I don't think absolute positioning will work because there may be more boxes added on other pages and the footer will not be in the right place.</p>
  
  <p>I am looking for a solution that uses CSS and HTML(5).
  Without the use of adding an image or using Javascript.</p>
  
  <p>I still have little knowledge on webcoding so if you can, please make your answer(s) simple or explain (as far as possible) every step (I understand and learn better with explanations).</p>