Percentage of height not working for portrait screen orientation

StackOverflow https://stackoverflow.com/questions/23198237

Вопрос

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?

Это было полезно?

Решение

Use this: viewport

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

Add ;

Другие советы

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/

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top