uburoi
Lt. Commander
- Registriert
- Aug. 2008
- Beiträge
- 1.306
Hallo zusammen!
Ich nutze schon länger einen selbstgeschriebenen Text-Editor, um altgriechischen Text zu schreiben. Da es sich allerdings um eine Desktop-Anwendung handelt, ich den Editor aber auch gerne auf mobilen Geräten verwenden möchte, will ich ihn nun als Web-Anwendung mit HTML, CSS und JavaScript "nachbasteln". Die Hintergrundarbeit mit JavaScript wird weniger ein Problem sein, da arbeite ich mich parallel gerade ein. Kopfzerbrechen macht mir aber ein Punkt des Seitenlayouts:
Wie auf dem Screenshot zu sehen, hat die Seite einen header (immer oben) und einen footer (immer unten). Dazischen habe ich den main-Bereich, der mittels "flex: 1" im Stylesheet die restliche Höhe einnimmt. In diesem Bereich befindet sich erstmal nur eine Textarea.
Was ich problemlos hinbekommen habe, ist die variable Breite der Textarea (auf dem Desktop ein bestimmter Prozentsatz der Breite, auf dem Handy die komplette Breite der Anzeige). Was aber nicht gelingen will, ist die Höhe der Textarea so festzulegen, dass sie immer (abzüglich eines schmalen Randes) die volle Höhe des main-Bereichs einnimmt; insbesondere auf dem Handy bekomme ich nie das gewünschte Ergebnis. Wenn ich "height: 100vh" verwende, wird offenbar immer die Höhe der Anzeige zugrunde gelegt und die Textarea geht über den unteren Rand hinaus; mit "height: 100%" ist die Textarea nur ein schmaler Schlitz. Wünschenswert wäre etwas wie "calc(100vh - header.height - footer.height)", aber das scheint es nicht zu geben.
Hat da jemand einen heißen Tipp? Vielen Dank im Voraus!
Gruß Jens
Ich nutze schon länger einen selbstgeschriebenen Text-Editor, um altgriechischen Text zu schreiben. Da es sich allerdings um eine Desktop-Anwendung handelt, ich den Editor aber auch gerne auf mobilen Geräten verwenden möchte, will ich ihn nun als Web-Anwendung mit HTML, CSS und JavaScript "nachbasteln". Die Hintergrundarbeit mit JavaScript wird weniger ein Problem sein, da arbeite ich mich parallel gerade ein. Kopfzerbrechen macht mir aber ein Punkt des Seitenlayouts:
Wie auf dem Screenshot zu sehen, hat die Seite einen header (immer oben) und einen footer (immer unten). Dazischen habe ich den main-Bereich, der mittels "flex: 1" im Stylesheet die restliche Höhe einnimmt. In diesem Bereich befindet sich erstmal nur eine Textarea.
Was ich problemlos hinbekommen habe, ist die variable Breite der Textarea (auf dem Desktop ein bestimmter Prozentsatz der Breite, auf dem Handy die komplette Breite der Anzeige). Was aber nicht gelingen will, ist die Höhe der Textarea so festzulegen, dass sie immer (abzüglich eines schmalen Randes) die volle Höhe des main-Bereichs einnimmt; insbesondere auf dem Handy bekomme ich nie das gewünschte Ergebnis. Wenn ich "height: 100vh" verwende, wird offenbar immer die Höhe der Anzeige zugrunde gelegt und die Textarea geht über den unteren Rand hinaus; mit "height: 100%" ist die Textarea nur ein schmaler Schlitz. Wünschenswert wäre etwas wie "calc(100vh - header.height - footer.height)", aber das scheint es nicht zu geben.
Hat da jemand einen heißen Tipp? Vielen Dank im Voraus!
Gruß Jens