高度百分比不适用于纵向屏幕方向
Posted
技术标签:
【中文标题】高度百分比不适用于纵向屏幕方向【英文标题】：Percentage of height not working for portrait screen orientation 【发布时间】：2014-06-05 13:36:57 【问题描述】：我正在尝试为 html 正文中包含的 2 个 div 元素（主要和标题）设置百分比。问题是当我的屏幕方向是纵向时，这不起作用（出现的高度百分比是错误的）。我正在检查的示例尺寸如下：
320x480
320x568
600x800
768x1024
800x1280
我使用viewport resizer 来检查我的代码。
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%;
这里出了什么问题？
【问题讨论】：
您在header 高度的行尾缺少分号，但您还使用了非标准的DOM 元素名称。为什么不将它们命名为 header 和 main 并带有 ID 的 div？
对我来说不幸的是，viewportresizer 需要超过 2 秒的时间，因为我似乎找不到下载按钮... WTF?!? :D
你必须给viewportresizer添加书签
不工作是什么意思？这是一个非常笼统的问题描述——你能更详细地描述它吗？ （比如，高度计算错误等等）
我补充说出现的高度是错误的。就这么简单
【参考方案1】：
使用这个：viewport
header
background-color:#F80012;
height:25%;
添加;
【讨论】：
已编辑。这不是问题。谢谢指正。 感谢您的链接。你能告诉我这个链接的哪个特定部分可以帮助我解决我的问题吗？ @Dchris viewport example 您能否添加一个简短的解释，说明视口将如何为您的答案节省我的时间？它正在工作 如果您将您的内容添加到答案的正文中而不是仅将其包含在评论跟踪中，此答案对其他搜索者会更有用。【参考方案2】：它工作得很好。看看小提琴
html, body
background-color:#A8F000;
height:100%;
header
background-color:#F80012;
height:20%;
main
background-color:#009E8E;
height:80%;
小提琴http://jsfiddle.net/7EEMB/
【讨论】：
以上是关于高度百分比不适用于纵向屏幕方向的主要内容，如果未能解决你的问题，请参考以下文章