Percentage Of Height Not Working For Portrait Screen Orientation

I am trying to set percentage for 2 div elements(main and header) contained in the body of html. The problem is that this is not working(the height percentages appearing are wrong)

Solution 1:

Use this: viewport

header{
    background-color:#F80012;
    height:25%;
}

Add ;

Solution 2:

It is working perfectly fine. Take a look at fiddle

html, body{
    background-color:#A8F000;
    height:100%;
    }

header{
    background-color:#F80012;
    height:20%;
    }

main{
    background-color:#009E8E;
    height:80%;
    }

Fiddle http://jsfiddle.net/7EEMB/