在没有 vh 的情况下，在移动设备上安全地使用所有垂直 space 减去 X 像素？

Question

我们有一个应用程序需要在各种桌面和移动设备上运行。主要内容 div 的样式如下：

#map {
    height: calc(100vh - 65px);
    width: 100%;
}

在 iPad 和最近的移动设备 Chrome 上，此元素太高无法显示在屏幕上，因此底部被切掉了。由于 this issue.

，它的高度正好超过工具栏的高度

设置适用于所有浏览器的 div 高度的安全方法是什么？

Answer 1

这个有用吗？我检查了我的 iPad & 似乎表现为 100% 高度 - 65px。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MAP 100% - 65px</title>
<style>
html, body
{
    margin:0;
    padding:0;
    height:100%;
    background:#666;
}

#map
{
    height: calc(100% - 65px);
    width: 100%; /*DON'T THINK THIS IS REQUIRED*/
    background:#CCC;
}

h1
{
    margin:0;
    padding:15px;
}

</style>

</head>
<body>
<div id="map"><h1>My Map</h1></div>
</body>
</html>

Codepen

在没有 vh 的情况下，在移动设备上安全地使用所有垂直 space 减去 X 像素？

Safely use all vertical space minus X pixels, on mobile, without vh?

css

position

mobile-safari