title: CSS - why I can't apply % on my height?
body: <p>I am trying to apply % on my height, but I could not. Instead the div just accept px, someone know what I am doing wrong?</p>
  
  <pre><code>.left-bar{
          height:200px;
  </code></pre>
  
  <p><strong>// if I use px works ok but if I use % does not work</strong></p>
  
  <p>css:</p>
  
  <pre><code>html,
  body {
    height: 100%;
    width: 100%;
    overflow-y: hidden;
    border:1px dashed gray;
  }
  
  .left-bar{
      height:200px; // why I cannot use % for my height?
      width:30%;
      border:1px solid green;
      overflow-y:scroll;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>    &lt;div class="container-fluid"&gt;
  
          &lt;div class="md-col-12"&gt;
          header
          &lt;/div&gt;
  
      &lt;div class="col-md-12"&gt;
      &lt;div class="left-bar"&gt;
     &lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;&lt;p&gt;alfkj aslkdjf slkdjf lksajf lkasjd flkajsd flkja sdlfkj asldkfj laskdj flkasjdf &lt;/p&gt;
  
      &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  
      &lt;div class="col-md-12"&gt;
      footer
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>jsfiddle: <a href="https://jsfiddle.net/q7kjm9pn/1/" rel="nofollow noreferrer">https://jsfiddle.net/q7kjm9pn/1/</a></p>
  
  <p>I tried do this:
  <a href="https://stackoverflow.com/questions/1622027/percentage-height-html-5-css">Percentage Height HTML 5/CSS</a></p>
  
  <p>is not duplicated
  is not duplicated see:
  edit: <a href="https://jsfiddle.net/q7kjm9pn/5/" rel="nofollow noreferrer">https://jsfiddle.net/q7kjm9pn/5/</a></p>