Utilisez en toute sécurité tout l'espace vertical moins X pixels, sur mobile, sans vh?

Nous avons une application qui doit fonctionner sur une large gamme de périphériques de bureau et mobiles. La principale div de contenu est de style ainsi:Utilisez en toute sécurité tout l'espace vertical moins X pixels, sur mobile, sans vh?

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

Sur iPad, et Chrome récente mobile, cet élément est trop grand pour tenir sur l'écran, de sorte que la partie inférieure est coupée. Il est trop grand par exactement la hauteur de la barre d'outils, en raison de this issue.

Quelle est une approche sûre pour définir la hauteur de la div qui fonctionnera sur tous les navigateurs?

Source

2017-06-19 Steve Bennett ㄹ

Est-ce que cela fonctionne? J'ai vérifié sur mon iPad & semble se comporter comme 100% hauteur - 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

Source

2017-06-19 07:35:43 Kerry7777

Avez-vous une capture d'écran de la version échouer? Ou pourriez-vous créer un codepen du problème que vous voyez sur les périphériques spécifiés provoquant problème? Est-ce que le div que vous voulez être 100% - 65px imbriqué? – Kerry7777

Utilisez en toute sécurité tout l'espace vertical moins X pixels, sur mobile, sans vh?

Répondre

Questions connexes