Hauteur de 100% sur le html/corps ne fonctionne pas sur iPhone

J'ai créé un site web réactif à l'aide de la Fondation avec un pied de page qui est absolument positionné sur le bas de la page. Sur mes navigateurs de bureau, il est exactement comme il devrait, mais sur mon iPhone le pied de page est superposée à une partie du contenu au lieu d'être tout le chemin en bas de la page.

J'ai mon html,body CSS mis à ceci:

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

Mais quand j'ai inspecter la page sur mon téléphone à l'aide de Safari outils de développement, quand j'ai passez la souris sur le code html ou le corps de la balise, il n'étend tout le chemin vers le bas de la page qui est la cause de mon pied de page de chevauchement de contenu.

Personne ne sait ce qui pourrait en être la cause?

Merci!

OriginalL'auteur user13286 | 2014-10-01

  1. 14

    Vous pouvez utiliser:

    height: 100vh;

    qui sera de 100% de la hauteur de la fenêtre d'affichage.

    Navigateur compatibilité: http://caniuse.com/#search=vh

    Merci pour cette question et votre réponse. J'étais fou de joie. À l'aide de 100vh (et min-height: 100%; pour faire bonne mesure) et la suppression supplémentaire contenant les divs est ce qui a fonctionné pour moi. Merci!

    OriginalL'auteur TheFrozenOne

  2. 1

    Vous pouvez utiliser calc, -moz-calc and -webkit-calc. Par exemple, disons que le pied de page est 100px height, puis:

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

    OriginalL'auteur Juancho Ramone

  3. 0

    essayez d'ajouter

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

    à votre règle CSS

    OriginalL'auteur Jonas Grumann

  4. 0

    Vous pouvez également faire un écran de style spécifique

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

    Plus sur les media queries ici http://cssmediaqueries.com/what-are-css-media-queries.html

    OriginalL'auteur Peter