Risolto il posizionamento div - css, mobile

Sto sviluppando un sito web mobile che ha essenzialmente tre divs un'intestazione, contenuto e piè di pagina. Voglio che l'intestazione e il piè di pagina siano corretti e che il contenuto sia scorrevole se c'è un flusso eccessivo. In questo momento il mio css è:

#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;
}

Questo funziona perfettamente, tuttavia nel contenuto Iavere alcuni campi di testo e su un dispositivo mobile quando la tastiera fa scattare l'intestazione e anche il piè di pagina viene sollevato rendendo il campo del contenuto troppo piccolo. Esiste comunque la possibilità di mantenerli fissi ma non di farli spingere quando si entra nel testo?

risposte:

Potresti semplicemente nascondere il piè di pagina usando JavaScriptogni volta che un campo di testo si concentra, dal momento che il sito web diventa più piccolo è hard-coded nel sistema operativo (che è responsabile per mostrare la tastiera)

Questo può essere fatto usando jQuery, o per mobile anche meglio (perché più piccolo): zepto.js

spero che sia d'aiuto

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

Cambia questo testo evidenziato in valore px. I valori% regolano l'oggetto in base alle dimensioni del browser.