在移動設備上安全地使用所有垂直空間減去X像素，不使用vh？

我們有一個應用程序需要在各種桌面和移動設備上工作。主要內容的div因此風格：在移動設備上安全地使用所有垂直空間減去X像素，不使用vh？

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

在iPad上，最近的移動瀏覽器，這個元素是太高，以適應在屏幕上，因此底部被砍掉。由於this issue，它的高度恰好高於工具欄的高度。

什麼是安全的方法來設置將在所有瀏覽器上工作的div的高度？

來源

2017-06-19 Steve Bennett ㄹ

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

來源

2017-06-19 07:35:43 Kerry7777

你有故障用版本的截圖？或者，您是否可以創建一個在指定設備上看到的問題的Codepen問題？你想要的div是100％ - 65px嵌套？ – Kerry7777

在移動設備上安全地使用所有垂直空間減去X像素，不使用vh？

回答

相關問題