title: HTML, Body height 100% does not work
body: <p>Ok, so I have a mobile application with <strong>Cordova</strong> and <strong>AngularJS</strong>. For the styling I use <strong>Less</strong> and <strong>Bootstrap</strong>. </p>
  
  <hr>
  
  <p><strong>Problem</strong></p>
  
  <p>In the mobile app I have tried to size my divs with percentage (%). But this does not seem to work. I cannot seem to change the following behavior: <code>The divs are as big as the content inside of them</code>. This problem sounds quite easy and I have tried many options on here (stackoverflow) aswell as on the web. Yet I have not found the solution to fix it and it is getting quite annoying. </p>
  
  <hr>
  
  <p><strong>I have tried</strong></p>
  
  <p>Adding <code>html, body { height: 100% }</code>,</p>
  
  <p>Adding <code>html, body, #canvas { height: 100%}</code></p>
  
  <p>Adding <code>#canvas { min-height: 100% }</code></p>
  
  <p>Adding <code>html { height: 100% } body { min-height: 100% }</code></p>
  
  <p>And a lot of other variations. Using <strong>px</strong> works, but I don't know how big my mobile device is, so that isn't realy handy.. (I also use bootstrap and some media queries for styling).</p>
  
  <hr>
  
  <p><strong>Example</strong></p>
  
  <p>When I add elements to my div I get the following behavior:</p>
  
  <p><a href="https://i.stack.imgur.com/gBXqa.png" rel="noreferrer"><img src="https://i.stack.imgur.com/gBXqa.png" alt="HTML"></a></p>
  
  <p>I want to remove that white empty space, but I can only achieve that when using <strong>px</strong> instead of <strong>%</strong>. </p>
  
  <hr>
  
  <p><strong>Less example:</strong></p>
  
  <pre><code>html, body {
      background: transparent;
      height: 100%;
      margin: 0;
      padding: 0;    
  }
  
  #canvas {
      min-height: 100%;
  }
  
  body {
      -webkit-touch-callout: none;                 //prevent callout to copy image, etc when tap to hold 
      -webkit-text-size-adjust: none;              //prevent webkit from resizing text to fit 
      -webkit-user-select: node;                   //prevent copy paste, to allow, change 'none' to 'text'  
      min-height: 100%;
      margin: 0;
      padding: 0; 
      background-color: @cgiColor;  
  }
  
  .header {
      top: 0px;
      width: 100%;
      height: 5%;
      background: @companyColor;
      color: @textColor;
  }
  
  .incidentContainer {
      background: @appBodyColor;
      width: 100%;
      height: 70%;
  }
  
  .footer {
      position: absolute;
      color: @textColor;
      bottom: 0px;
      height: 15%;
      width: 100%;    
      background: @companyColor;
  }
  </code></pre>
  
  <hr>
  
  <p><strong>Extra information</strong></p>
  
  <p>I am using AngularJS, so my application is a single page application. My index.html looks as follows:</p>
  
  <pre><code>&lt;body oncontextmenu="return false" &gt;  
     &lt;div class="{{ pageClass}}"  ng-view &gt;&lt;/div&gt;        
     &lt;script type="text/javascript" src="cordova.js"&gt;&lt;/script&gt;
     &lt;script data-main="main" src="lib/require.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>With of course the standard links to my CSS sheets, and so on. 
  All the other pages are includes in the '<strong>ng-view</strong>' and don't have any <strong></strong> or <strong></strong> tags. This because they are included. </p>
  
  <hr>
  
  <p><strong>Solution</strong></p>
  
  <p>The solution was to add the following CSS rule:</p>
  
  <pre><code>div[ng-view]{
       height: 100%;
  }
  </code></pre>
  
  <p>This worked, because all divs (except for html &amp; body) are children of this item. Adding the 100% made the div space span to 100% of the screen and thus provides a space for percentage to work.</p>
  
  <p><strong><em>Credits go to Jai for this answer!</em></strong> </p>