css - 调整网页高度为手机屏幕高度

Question

我有一个移动应用程序。我想让我的 CSS 适用于所有手机。为此，我只对所有 CSS 调用使用百分比:

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

问题是我无法获得匹配所有页面的网页高度。我的意思是，例如 Android 屏幕很大(底部有很多空白区域)但其他手机不是。(假设下面的图片是一个 android。这就是我的应用程序在上面的样子)

我已经尝试过让所有高度都相同:

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

宽度 有效，但高度无效。我怎样才能让高度以同样的方式工作？如果高度关闭，那么我所有的百分比也会关闭(尝试针对每个移动浏览器进行调整)

Answer 1

来自 Sitepoint's CSS Reference :

Percentage values refer to the height of the element’s containing block. If the height of the containing block isn’t specified explicitly (that is, it depends on content height), and this element isn’t absolutely positioned, the percentage value is treated as auto. A percentage value is also treated as auto for table cells, table rows, and row groups.

如果不尝试添加 top:0; 和 bottom:0;，将你的 body 设置为 position:absolute; 应该可行> 以及您的绝对定位。