angular partials fail to take browser height

i am in a very nasty problem here.. i have created a app in angular js and used partials. one problem that i run unto is that when i deploy the app on mobile it does not pass on the browser's height that is 100% to the partials inside

here is my sample:

    <html>
    <head>
    .
    .
    </head>
    <body>
    .
    <ng-view></ng-view>
    .
    .
    .
    </body>

in my css i use this

  html, body {
  min-height: 100%;
  min-width: 100%
  }

  .header {
  height: 20%; /*i expect this to be 20% of body height*/
  background-color: red
  }

this is my partial inside 

  <div class="header"></div>

PROBLEM: div with class header does not take 20% of body height, it is not displayed at all, whereas same code when run on dektop browser seems to work and 20% of top area is displayed red.

You may need to specifically set position and top/bottom on your body for the header to be displayed as you intended.

Take a look at:

Adjust Webpage height to height of mobile screen