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

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's CSS Reference：

  

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

将您的正文设置为position:absolute;应该有效，如果它没有尝试添加top:0;和bottom:0;以及absolute定位。

Answer 2

如果您希望网站的宽度和高度为WebView宽度和高度的100％，则需要设置视口元标记：

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

可以在the Chrome developer site找到对此的详细描述，以及针对混合应用的其他一些提示。

Answer 3

你的意思是你希望内容空间填满高度吗？不确定是否可以这样做，但是所有空白的一个设计解决方案可能是在底部有一个更暗的垂直渐变背景，以使内容看起来不那么孤独。

Answer 4

在css中使用视口高度单位，如下所示：

.element { max-height: 100vh; }

或

.element { min-height: 100vh; }

甚至

.element { min-height: calc(100vh - 60px); }

如果您需要调整元素的高度，这不是全高。