调整网页高度至手机屏幕高度

我有一个手机应用程序。我想让我的CSS与所有手机一起工作。要做到这一点，我只是用百分比为我所有的CSS电话：调整网页高度至手机屏幕高度

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

的问题是，我不能让网页的高度，以匹配所有页面。通过这个我的意思是，Android屏幕例如是巨大的（底部有很多空白），但其他手机不是。（想象下面的图像是一个机器人，这是我的应用程序将看起来如此）

enter image description here

我曾经尝试这样做，以获得高度全部相同：

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

的width作品，但高度不。我怎样才能让高度以同样的方式工作？如果高度是关闭的，那么我所有的百分比将要关闭太（试图调整每个手机浏览器）

来源

2011-07-11 Stanley Cup Phil

从Sitepoint's CSS Reference：

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

设置你的身体position:absolute;应该工作，如果它不尝试用你的absolute定位一起加入top:0;和bottom:0;。

来源

2011-07-11 21:38:13

你的意思是说你想让内容空出来填充高度吗？不确定是否可以这样做，但对所有空白的一种设计解决方案可能是垂直渐变背景在底部较暗，以使内容看起来不那么孤独。

来源

2011-07-11 22:50:47

如果您希望您的网站的宽度和高度是你的WebView的宽度和高度为100％，那么你需要设置视meta标签：

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

一个最好的说明，以沿可以在the Chrome developer site上找到混合应用程序其他技巧的数量。

来源

2014-07-28 14:31:10 skyjacks

使用视口的高度单元中的CSS是这样的：

.element { max-height: 100vh; }

或

.element { min-height: 100vh; }

甚至

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

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

来源

2017-06-30 15:33:11

调整网页高度至手机屏幕高度

回答

相关问题