私たちは、幅広いデスクトップおよびモバイルデバイスで動作する必要のあるアプリを持っています。メインコンテンツのdivは、このようにスタイル設定され：iPadでモバイルで、垂直方向のスペースからXピクセルを差し引いて、安全に使用してください。
#map {
height: calc(100vh - 65px);
width: 100%;
}
を、最近の携帯クローム、この要素が画面に収まるように背が高すぎるので、下の部分が切り落とされます。 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>
あなたが失敗したバージョンのスクリーンショットを持っていますか？または、問題の原因となったデバイスで表示される問題のコードを作成できますか？ divを100％ - 65pxのネストしたいのですか？ – Kerry7777