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

【问题标题】：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添加书签
不工作是什么意思？这是一个非常笼统的问题描述——你能更详细地描述它吗？（比如，高度计算错误等等）
我补充说出现的高度是错误的。就这么简单

标签： html css responsive-design height orientation

【解决方案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/

【讨论】：