问题
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) when my screen orientation is portrait. Examples dimensions i am checking are the below:
320x480
320x568
600x800
768x1024
800x1280
I use viewport resizer to check my code.
HTML code:
<body>
<header>
<div id="title">
Just a title
</div>
</header>
<main>
Main div element here
</main>
</body>
CSS code:
html, body{
background-color:#A8F000;
height:100%;
}
header{
background-color:#F80012;
height:25%;
}
main{
background-color:#009E8E;
height:70%;
}
What is going wrong here?
回答1:
Use this: viewport
header{
background-color:#F80012;
height:25%;
}
Add ;
回答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/
来源：https://stackoverflow.com/questions/23198237/percentage-of-height-not-working-for-portrait-screen-orientation