100% de la hauteur sur un navigateur mobile à l'aide de CSS

Je travaille sur mon site web et je veux qu'il à l'air vraiment simple sur mobile, en gros il y a juste trois sections, chacun doit adapter la fenêtre de largeur et de hauteur

<section style="width: 100%; min-height: 100%">

</section>

Il semble parfait sur mon navigateur de l'ordinateur en mode de l'appareil, mais quand je l'ouvre sur mon mobile (iPhone), il y a un problème avec la barre d'url, ce qui est plus petit, que nous glisser vers le bas. Au chargement de la page, min-hauteur s'adapte au navigateur de hauteur, y compris le bar, et elle ne change pas lors de la bar change de dimension. Afin de ne pas s'adapter à l'écran plus. J'ai essayé ceci:

<meta name="viewport" content="height=device-height">

Mais alors, les articles sont de haut, évidemment. Probablement que je pouvais faire quelques solution en jQuery, mais je préfère ne pas. J'espère qu'il y est quelques solutions simples en CSS.
Je vous remercie pour votre temps.
Si vous voulez le voir en direct: http://kacpergalka.nazwa.pl/_portfolio

Sur Safari mobile, je pense que le corps doit être positionné par rapport à l'utilisation height: 100%;, pas sûr cependant
Vous pouvez essayer de la fenêtre d'affichage unités - 100vh

OriginalL'auteur kacpergalka | 2015-04-17

  1. 9

    Vous pouvez essayer de le vh (fenêtre d'affichage de la hauteur) appareil dans votre min-hauteur de style.

    <section style="width: 100%; min-height: 100vh">

</section>

    Une autre option serait d'utiliser calc().

    <section style="width: 100%; height: calc(100%);">

</section>
    vh ne fonctionne pas sur mobile safari je me souviens
    En fait, il ne sur safari, mais ne fonctionne pas sur chrome. 🙁 Merci de toute façon, c'est la meilleure solution pour l'instant, je n'ai jamais utilisé cet appareil avant d'.
    Merci, la deuxième option a travaillé. Jamais pensé que je vais essayer celui-là!

    OriginalL'auteur Aaron

  2. 0

    Vous pouvez essayer cette la échelle balise meta: 

    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    Je l'utilise aussi bien, je pense qu'il est nécessaire pour chaque réactif page fonctionne correctement sur mobile. Mais il n'aide pas dans ce cas.
    Alors...est-il utile ou pas dans votre cas ?
    Désolé, juste une faute de frappe! Il n'a pas. 🙁

    OriginalL'auteur dbd