[Renao]

Hallo Leute,

ich arbeite im Moment im Rahmen meines Studiums an einer kleinen App, die vor allem dafür dienen soll Inhalte (Text und Bilder) präsentieren soll.

Die ganze Sache läuft via PhoneGap, d.h. im Grunde bastel ich "einfach eine Webseite dahinter".


Um diese App aber sowohl auf dem Smartphone, Tablet als auch ggf. bei größeren Bildschirmen vernünftig ansehen zu können, habe ich die Seite mithilfe der unsemantic-CSS-Dateien in brauchbares responsive Design gebracht.

Als Kerngerüst der Seite benutze ich jQuery Mobile, um ein nativeres Erscheinungsbild generieren zu können und auch eine gewisse Usability-Erwartung erfüllen zu können.


Die einspaltige Smartphone-Variante macht keine Probleme, allerdings gibt es nun bei den größeren Auflösungen ein Problem:

Seitenaufbau (3 Spalten):

-------------------------------------
Kopfzeile
-------------------------------------
Navigation | Content1 |Content2
-------------------------------------
Fußzeile
-------------------------------------



Die Fuß- sowie die Kopfzeile sind fix und haben eine feste Größe (bspw. jeweils 2 em).

Jetzt soll der Bereich dazwischen mit der Navigation, Content1, Content2 aber idealerweise auf 100% (- 2 x 2 em) gestreckt werden.

Und da liegt nun das Problem. Wie kriege ich das vernünftig in CSS hin? Oder gibt es sonst nur die Möglichkeit auf JavaScript zurückgreifen zu müssen?


Über hilfreiche Antworten würde ich mich natürlich freuen!