Höhe 100% auf HTML/Körper funktioniert nicht auf iPhone

Question

Ich habe eine reaktionsschnelle Website mit Foundation mit einer Fußzeile erstellt, die absolut am unteren Rand der Seite positioniert ist. Auf meinen Desktop-Browsern sieht es genau so aus, wie es sollte, aber auf meinem iPhone überlappt die Fußzeile einen Teil des Inhalts, anstatt ganz unten auf der Seite zu sein.

Ich habe meine html, body CSS diesen Satz:

html, body { 
    height:100%; 
    margin:0; 
    padding:0; 
} 

Aber wenn ich die Seite auf meinem Handy unter Verwendung der Safari-Entwickler-Tools überprüfen, wenn ich über den HTML-Code oder Body-Tag schweben, ist es nicht bis zum Ende der Seite, was dazu führt, dass meine Fußzeile Inhalte überlappt.

Weiß jemand, was das verursachen könnte?

Danke!

Answer 1

Sie verwenden:

height: 100vh; 

, die 100% Darstellungshöhe sein wird.

Browser compability: http://caniuse.com/#search=vh

Answer 2

Versuchen Sie,

min-height: 100%; 
min-width: 100%; 

auf Ihre CSS-Regel

Answer 3

Sie können calc, -moz-calc and -webkit-calc verwenden. Zum Beispiel Angenommen, die Fußzeile 100px height ist, dann gilt:

html, body, .container{ 
    height: -moz-calc(100% - 100px); 
    height: -webkit-calc(100% - 100px); 
    height: calc(100% + 30px - 100px); 
    margin:0; 
    padding:0; 
} 

Answer 4

Sie können auch einen Bildschirm bestimmten Stil

@media screen { 
    html, body { 
    height: 100vh; 
    } 
} 

Mehr über Abfragen Medien machen hier http://cssmediaqueries.com/what-are-css-media-queries.html