Posicionamento div fixo - css, mobile

Eu estou desenvolvendo um site para celular que tem essencialmente três divs um cabeçalho, conteúdo e rodapé. Eu quero que o cabeçalho e o rodapé sejam corrigidos e o conteúdo rolável se houver fluxo excedente. Agora meu 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;
}

Isso funciona perfeitamente, no entanto, no conteúdo que euter alguns campos de texto e em um dispositivo móvel quando o teclado aparece o cabeçalho e rodapé também são empurrados para cima fazendo o campo de conteúdo muito pequeno. Existe alguma maneira de mantê-los fixos, mas não tê-los pressionados ao digitar o texto?

Respostas:

Você poderia apenas esconder o rodapé usando JavaScripttoda vez que um campo de texto ganha foco, já que o fato de o site ficar menor é codificado no sistema operacional (que é responsável por mostrar o teclado)

Isso pode ser feito usando jQuery, ou para dispositivos móveis ainda melhor (porque menor): zepto.js

espero que ajude

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

Altere este texto realçado para o valor px. % valores ajustam o objeto com base no tamanho do seu navegador.