CSS 将网页高度调整为手机屏幕高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6656055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adjust Webpage height to height of mobile screen
提问by Stanley Cup Phil
I have a mobile app. I want to make my css work with all mobile phones. To do this I just use percentages for all my css calls:
我有一个移动应用程序。我想让我的 css 适用于所有手机。为此，我只对所有 css 调用使用百分比：
.Wrapper
{
margin: auto;
text-align: center;
width: 60%;
}
The problem is that I cannot get the web page height to match for all pages. By this I mean that Android screens for example are huge (with a lot of white space on the bottom) but other phones are not.(Imagine that the image below is a android. That is how my app will look on it)
问题是我无法获得与所有页面匹配的网页高度。我的意思是，例如，Android 屏幕很大（底部有很多空白区域），但其他手机则不然。（想象一下下面的图片是一个 android。这就是我的应用程序在上面的样子）
I have tried this to get the heights to all be the same:
我已经尝试过使高度都相同：
body
{
text-align: center;
font-family: Helvetica, Arial, sans-serif;
color: Black;
background: #39bcd4 none;
height: 100%;
width: 100%;
}
The widthworks but the height does not. How can I get the height to work the same way? If the height is off, then all my percentages are going to be off too (attempting to adjust for each mobile browser)
该width工程，但高度不。我怎样才能让高度以同样的方式工作？如果高度关闭，那么我所有的百分比也将关闭（尝试针对每个移动浏览器进行调整）
回答by Walter Cameron
From 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.
百分比值是指元素包含块的高度。如果未明确指定包含块的高度（即它取决于内容高度），并且该元素不是绝对定位的，则百分比值将被视为自动。对于表格单元格、表格行和行组，百分比值也被视为自动。
Setting your body to position:absolute;should work, if it doesn't try adding top:0;and bottom:0;along with your absolutepositioning.
将您的身体设置为position:absolute;应该可以工作，如果它不尝试添加top:0;并bottom:0;与您的absolute定位一起。
回答by skyHymans
If you want the width and height of your site to be 100% of your WebView's width and height then you need to set the viewport meta tag:
如果您希望网站的宽度和高度为 WebView 宽度和高度的 100%，那么您需要设置视口元标记：
<meta name="viewport" content="width=device-width,height=device-height initial-scale=1">
A great description of this, along with a number of other tips for hybrid apps, can be found on the Chrome developer site.
可以在 Chrome 开发人员网站上找到对此的详细描述以及混合应用程序的许多其他提示。
回答by tsveti_iko
Use the viewport height unit in the css like this:
在 css 中使用视口高度单位，如下所示：
.element { max-height: 100vh; }
or
或者
.element { min-height: 100vh; }
or even
甚至
.element { min-height: calc(100vh - 60px); }
if you need to adjust the height of a element, which is not full height.
如果你需要调整一个元素的高度，它不是全高。
回答by Beth Budwig
Do you mean that you want the content to space out to fill the height? Not sure if that can be done, but one design solution to all the whitespace might be to have a vertical gradient background that's darker on the bottom, to make the content look a little less lonely.
你的意思是你想让内容空间来填充高度？不确定这是否可以完成，但是所有空白的一种设计解决方案可能是在底部设置较暗的垂直渐变背景，以使内容看起来不那么孤单。
