不适用于纵向屏幕方向的高度百分比 [英] Percentage of height not working for portrait screen orientation
本文介绍了不适用于纵向屏幕方向的高度百分比的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图设置包含在html主体中的2个div元素（main和header）的百分比。问题是，当我的屏幕方向是纵向时，这不工作（高度百分比出现错误）。我检查的示例维度如下：
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
我使用视口缩放器检查我的代码。
HTML代码：
<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%;
}
这里有什么问题？
推荐答案
使用此方法： viewport
header{
background-color:#F80012;
height:25%;
}
添加;
这篇关于不适用于纵向屏幕方向的高度百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
