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

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 元素名称。为什么不将它们命名为 headermain 并带有 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/

【讨论】:

以上是关于高度百分比不适用于纵向屏幕方向的主要内容,如果未能解决你的问题,请参考以下文章

带有导航选项卡的 ActionBar 随屏幕方向改变高度

Cordova 的插件(屏幕方向/应用程序版本)不适用于 Ionic 5 / Angular 11

JS 如何获取和监听屏幕方向的改变?

iOS 方向在特定屏幕上支持横向和纵向 - 不是所有屏幕

Android 屏幕方向:横向回到纵向

在 Android 中切换屏幕方向