Verwenden Sie sicher alle vertikalen Raum minus X Pixel, auf mobilen, ohne vh?

Wir haben eine App, die auf einer Vielzahl von Desktops und mobilen Geräten arbeiten muss. Der Hauptinhalt div wird so gestylt:Verwenden Sie sicher alle vertikalen Raum minus X Pixel, auf mobilen, ohne vh?

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

auf iPad, und die letzten mobile Chrome, dieses Element zu groß ist, auf dem Bildschirm zu passen, so dass der untere Teil aus wird zerhackt. Aufgrund der this issue Höhe ist die Höhe der Symbolleiste zu hoch.

Was ist ein sicherer Ansatz zum Einstellen der Höhe des Div, die auf allen Browsern funktioniert?

Quelle

2017-06-19 Steve Bennett ㄹ

Funktioniert das? Ich überprüfte auf meinem iPad & scheint sich als 100% Höhe - 65px zu verhalten.

<!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

Quelle

2017-06-19 07:35:43 Kerry7777

Haben Sie einen Screenshot der Fail Version? Oder könnten Sie einen Codepen des Problems erstellen, das auf den angegebenen Geräten angezeigt wird, die das Problem verursachen? Ist das Div 100% - 65px verschachtelt? – Kerry7777

Verwenden Sie sicher alle vertikalen Raum minus X Pixel, auf mobilen, ohne vh?

Antwort

Verwandte Themen