Naprawiono pozycjonowanie div - css, mobile

Rozwijam stronę mobilną, która ma w zasadzie trzy divs nagłówek, treść i stopkę. Chcę, aby nagłówek i stopka zostały naprawione, a zawartość przewijana, jeśli jest nadmiarowy. W tej chwili moje css to:

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

Działa to doskonale, jednak w treści Imają pola tekstowe i na urządzeniu mobilnym, gdy klawiatura wyskoczy do nagłówka, a stopka również zostanie przesunięta w górę, co spowoduje, że pole treści będzie zbyt małe. Czy jest mimo to, aby je naprawić, ale nie mają one zostać wypchnięte podczas wprowadzania tekstu?

Odpowiedzi:

Możesz po prostu ukryć stopkę za pomocą JavaScriptza każdym razem, gdy pole tekstowe zaczyna się skupiać, ponieważ fakt, że strona staje się mniejsza, jest zakodowane w systemie operacyjnym (który jest odpowiedzialny za pokazywanie klawiatury)

Można to zrobić za pomocą jQuery, lub na urządzenia mobilne jeszcze lepiej (ponieważ mniejsze): zepto.js

Nadzieja, która pomaga

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

Zmień zaznaczony tekst na wartość px. Wartości% dostosowują obiekt na podstawie rozmiaru przeglądarki.