Question

我们的应用需要适用于各种桌面和移动设备。因此主要内容div的样式为：

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

在iPad和最近的移动Chrome上，此元素太高而无法放在屏幕上，因此底部被切掉了。由于this issue，它的高度与工具栏的高度完全相同。

设置可在所有浏览器上使用的div高度的安全方法是什么？

Answer 1

这有用吗？我查看了iPad和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

在移动设备上安全使用所有垂直空间减去X像素，没有vh？

1 个答案: