Altezza 100% su html/body non funziona su iPhone

Question

Ho creato un sito Web reattivo utilizzando Foundation con un piè di pagina che è assolutamente posizionato nella parte inferiore della pagina. Sui miei browser desktop, sembra esattamente come dovrebbe, ma sul mio iPhone il piè di pagina si sovrappone ad alcuni dei contenuti invece di essere completamente in fondo alla pagina.

ho il mio html, CSS corpo impostato su questo:

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

Ma quando ho ispezionare la pagina sul mio telefono utilizzando gli strumenti di sviluppo di Safari, quando mi passa il mouse sopra il tag HTML o del corpo, non è si estende fino in fondo alla pagina, cosa che sta causando la sovrapposizione del contenuto al mio piè di pagina.

Qualcuno sa che cosa potrebbe causare questo?

Grazie!

Answer 1

si potrebbe usare:

height: 100vh; 

che sarà al 100% dell'altezza viewport.

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

Answer 2

prova ad aggiungere

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

alla regola CSS

Answer 3

È possibile utilizzare calc, -moz-calc and -webkit-calc. Per esempio, diciamo che il piè di pagina è 100px height, quindi:

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

Answer 4

Si può anche fare uno stile specifico schermo

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

più su media query qui http://cssmediaqueries.com/what-are-css-media-queries.html