Positionnement fixe fixe - css, mobile

Je développe un site Web mobile qui a essentiellement trois divs un en-tête, un contenu et un pied de page. Je veux que l'en-tête et le pied de page soient fixes et que le contenu défile s'il y a trop de flux En ce moment, mon css est:

#header{
top: 0;
left: 0;
height: 8%;
width: 100%;
position: fixed;
text-align: center;
text-height:font-size;
}

#content{
top: 8%;
left: 0;
bottom: 15%;
width: 100%;
position: fixed;
margin: 0;
padding: 0;
overflow: auto;
z-index: 0;
}

#footer{
height: 15%;
width: 100%;
position: fixed;
text-align:center;
bottom: 0;
left: 0;
z-index: 1;
}

Cela fonctionne parfaitement, cependant dans le contenu que jeavoir des champs de texte et sur un appareil mobile lorsque le clavier apparaît, l'en-tête et le pied de page sont également relevés, ce qui rend le champ de contenu trop petit. Y a-t-il un moyen de les garder fixes, mais de ne pas les pousser vers le haut lors de la saisie de texte?

Réponses:

Vous pouvez simplement cacher le pied de page en utilisant JavaScriptchaque fois qu'un champ de texte se concentre, étant donné que le fait de réduire la taille du site Web est codé en dur dans le système d'exploitation (responsable de l'affichage du clavier)

Cela peut être fait en utilisant jQuery, ou pour le mobile encore mieux (parce que plus petit): zepto.js

J'espère que cela pourra aider

#content{
top: 8%;
left: 0;
bottom: 15%;
**width: 100%;**
position: fixed;
margin: 0;
padding: 0;
overflow: auto;
z-index: 0;
}

Modifiez ce texte en surbrillance en valeur px. Les valeurs en% ajustent l'objet en fonction de la taille de votre navigateur.