title: How to keep a div's height 100%?
body: <p>I have 2 grids: one side bar and one main section. I desire to have sidebar's div height 100%.
  However, the height of main section breaks that.. and I don't understand how/why that happens... </p>
  
  <p>To be clear:</p>
  
  <p>Page:</p>
  
  <pre><code> &lt;div class="wrap"&gt;
  
   &lt;div class="section group"&gt;    
  
   &lt;div class="col section_1_2"&gt;
      &lt;div class="sideBar"&gt;sideBar&lt;/div&gt;
   &lt;/div&gt;&lt;!--section_1_2--&gt;
  
   &lt;div class="col section_2_2"&gt; 
      &lt;div class="layout"&gt;layout
          &lt;span&gt;1&lt;/span&gt;
          &lt;span&gt;2&lt;/span&gt;
          &lt;span&gt;3&lt;/span&gt;
          &lt;span&gt;4&lt;/span&gt;
      &lt;/div&gt;
   &lt;/div&gt;&lt;!--section_2_2--&gt;    
  
   &lt;/div&gt;&lt;!--section group--&gt;   
  
   &lt;/div&gt;&lt;!--wrap--&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code> *{margin:0;padding:0;}
  
   body,html{height:100%;}
  
   .wrap{
   width:100%;
   height:100%;
   }
  
   .sideBar{
   width:100%;
   height:100%;
   background:lightblue;
   }
  
   .layout{
   width:90%;
   height:auto;
   background:blue;
   margin:0 auto;
   }
  
   .layout span{
   width:200px;
   height:500px;
   background:yellow;
   display:block;
   clear:both;    
   }
  
   /* fluid grids */
   .section_1_2{
   width:20%;
   height:100%;
   }
   .section_2_2{
   width:80%;
   height:100%;
   }
  
   /* Grid settings*/
   .section{
   clear:both;
   padding:0;
   margin:0;
   height:100%;
   }
  .group:before,
  .group:after{
   content:"";
   display:table;
   }
  .group:after{
   clear:both;
   }
  .col{
   display:block;
   float:left;
   }
  </code></pre>
  
  <p>So what happens is: If I don't add these span tags(which is extra 2000px height), sidebar will appear correctly(100% height) but If I add long height content in layout it breaks the 100% height of sidebar..</p>
  
  <p>So what happens here actually? What changes the height of the page or sidebar?</p>
  
  <p>Please check here: <a href="http://jsfiddle.net/83noLsjv/1/" rel="nofollow">http://jsfiddle.net/83noLsjv/1/</a></p>
  
  <p>Probably this is something really simple but I can't see the solution to keep sidebar 100% height and at the same time add long content in layout...</p>
  
  <p>Thank you in advance!</p>