Ciao a tutti,
sono nuovissimo all'HTML5, ma ho abbastanza esperienza nella versione 4.
Mi sto mettendo sotto per fare la versione mobile di un mio sito.
In questo sito ho però una pagina con dei frame (che un giorno toglierò, non è la priorità al momento ) e visto che la sto rifacendo da capo vorrei eliminarli, ma senza togliere la loro funzione.

La pagina in HTML4 è così:
http://pastebin.com/YN6qiCjD

Come vedete è una specie di chat con due frame fissi e non scrollabili. Il top contenente info varie, il bottom contenente il form per scrivere e quello centrale che contiene i vari messaggi scritti.

Ho provato a riprodurre la stessa cosa con i tag HTML5 e il css.
http://mbeta.phyrosia.com/
Su pc funziona, ma su mobile no! Su mobile infatti il section centrale è alto abbastanza da farci stare tutto il testo e dopo quello viene messo il footer.

Come potrei raggiungere il mio scopo?

Vi ringrazio in anticipo