title: Why is percentage height not working on my div?
body: <p>I have two divs with a height of 90%, but the display is different. </p>
  
  <p>I have tried to put an outer div around them, but that has not helped. Also, it's the same on Firefox, Chrome, Opera, &amp; Safari.</p>
  
  <p>Can someone explain why I am having this problem?</p>
  
  <p>Below is my code:   </p>
  
  <pre><code>&lt;div style="height: 90%"&gt;
      &lt;div ng-controller="TabsDataCtrl" style="width: 20%; float: left;"&gt;
          &lt;tabset&gt;
              &lt;tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
                 disabled="tabs[0].disabled"&gt;
              &lt;/tab&gt;
  
  
              &lt;tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
                   disabled="tabs[2].disabled"&gt;
              &lt;/tab&gt;
          &lt;/tabset&gt;
      &lt;/div&gt;
  
      &lt;div id="leaflet_map" ng-controller="iPortMapJobController"&gt;
          &lt;leaflet center="center" markers="markers" layers="layers" width="78%"&gt;&lt;/leaflet&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>