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

标签 html css responsive-design height orientation

我正在尝试为包含在 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%;
    }

这里出了什么问题?

最佳答案

使用这个:viewport

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

添加;

关于html - 高度百分比不适用于纵向屏幕方向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23198237/

相关文章:

html - 如何创建单边圆形效果

html - 将 <button> 的显示设置为表格单元格

javascript - 如何在CSS中将文本定位在图像中

css - 如何通过 AJAX 从不同来源获取 CSS 文件?

jquery - Bootstrap header grid layout & CSS transition with jquery 在 iPad 和 iPhone 上运行不佳

javascript - 浏览器窗口响应内容

c# - 从 phonegap 应用程序的 MainPage.xaml.cs 切换 html 页面

html - css固定标题溢出?

css - 折叠 CSS Grid 两列布局中未使用的空间

css - 在响应式网页设计中,如何确定嵌套列的断点?