We have an app that needs to work on a wide range of desktop and mobile devices. The main content div is styled thus:
#map {
height: calc(100vh - 65px);
width: 100%;
}
On iPad, and recent mobile Chrome, this element is too tall to fit on the screen, so the bottom part is chopped off. It's too tall by exactly the height of the toolbar, due to this issue.
What's a safe approach for setting the height of the div that will work on all browsers?
Does this work? I checked on my iPad & seems to behave as 100% height - 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>
