调整网页高度到移动屏幕的高度

Question

我有一个移动应用程序.我想让我的CSS适用于所有手机.要做到这一点,我只使用所有css调用的百分比:

.Wrapper
{
    margin: auto;
    text-align: center;
    width: 60%;
}

问题是我无法获得所有页面的网页高度.我的意思是说Android屏幕是巨大的(底部有很多空白区域),但其他手机不是.(想象一下,下面的图片是一个机器人.这就是我的应用程序看起来的样子)

我试过这个以达到相同的高度:

body
{
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    color: Black;
    background: #39bcd4 none;
    height: 100%;
    width: 100%;
}

该width但是高度的作品没有.如何让高度以同样的方式工作？如果高度关闭,那么我的所有百分比也将关闭(尝试调整每个移动浏览器)

Answer 1

来自Sitepoint的CSS参考:

百分比值是指元素包含块的高度.如果未明确指定包含块的高度(即,它取决于内容高度),并且此元素未绝对定位,则百分比值将被视为auto.对于表格单元格,表格行和行组,百分比值也被视为自动.

设置你的身体position:absolute;应该工作,如果它没有尝试添加top:0;和bottom:0;你的absolute定位.

Answer 2

如果您希望网站的宽度和高度为 WebView\xe2\x80\x99s 宽度和高度的 100%，那么您需要设置视口元标记：

\n\n

<meta name="viewport" content="width=device-width,height=device-height initial-scale=1">\n

\n\n

对此的详细描述以及混合应用程序的许多其他技巧可以在Chrome 开发人员网站上找到。

\n