Question

我正在尝试设置html正文中包含的2个div元素（main和header）的百分比。问题是，当我的屏幕方向是纵向时，这不起作用（出现的高度百分比是错误的）。我正在检查的示例尺寸如下：

小320x480

320x568

600×800

768×1024

800x1280

我使用viewport resizer来检查我的代码。

HTML code：

<body>
<header>

<div id="title">
Just a title
</div>

</header>

<main>
Main div element here
</main>

</body>

CSS代码：

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

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

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

这里出了什么问题？

Answer 1

使用此：viewport

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

添加;

Answer 2

它工作得非常好。看看小提琴

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

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

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

小提琴http://jsfiddle.net/7EEMB/

高度百分比不适用于纵向屏幕方向

2 个答案: