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

问题描述：

我们有一个应用程序需要在各种桌面和移动设备上工作。主要内容的div因此风格：在移动设备上安全地使用所有垂直空间减去X像素，不使用vh？

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

在iPad上，最近的移动浏览器，这个元素是太高，以适应在屏幕上，因此底部被砍掉。由于this issue，它的高度恰好高于工具栏的高度。

什么是安全的方法来设置将在所有浏览器上工作的div的高度？

答

这是行不通的？我检查了我的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

你有故障用版本的截图？或者，您是否可以创建一个在指定设备上看到的问题的Codepen问题？你想要的div是100％ - 65px嵌套？ – Kerry7777

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

相关推荐