CSS Höhe einer textarea abhängig vom main-Bereich

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

Bildschirmfoto 340.png
 
Wenn Du dem Header und Footer auch eine Höhenangabe in vh gibst, kannst Du diese beiden Werte ja von der Height abziehen. Oder aber Du gibst dem main Bereich eine Höhenangabe, dann sollte das auch mit 100% klappen. Evtl auch bei textarea display: block; verwenden

Aber ohne das darunterliegende HTML-Gerüst zu sehen, ist das nur stochern im dunkeln.
 
Header und Footer haben keine feste Höhe, aber das könnte ich mal probieren.
Der Seitenaufbau ist bisher denkbar schlicht:

HTML:
<!DOCTYPE html>

<html>

<head>
    <title>Gramma · Altgriechisch-Editor</title>
    <link rel="stylesheet" href="./editor.css">
    <meta charset="UTF-8" />
    <meta name = "viewport" content = "width = device-width, initial-scale = 1" />
</head>

<body>
    <header>
        <h1>Γράμμα · Altgriechisch-Editor</h1>
    </header>

    <main>
        <textarea class="editor" id="greekeditor"></textarea>
    </main>

    <footer>
        <p class = "foot">((Ein bisschen Footer-Text …))</p>
    </footer>
</body>

</html>

Das Stylesheet dazu (bisher mangels besserer Kenntnis etwas zusammengestoppelt):

CSS:
* {
    box-sizing: border-box;
}

body {
    background: #fff;
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
    margin: 0;
    min-height: 100vh;
    padding-top: 0;
}

footer {
    background: #f6f6f6;
    border-top: 1px solid #ccc;
    bottom: 0;
    margin-top: 1em;
    padding: 0.15em;
    position: fixed;
    text-align: center;
    width: 100vw;
}

h1 {
    color: #39c;
    font-size: 14pt;
    font-weight: normal;
    padding: 0em 0.75em;
    text-shadow: 1px 2px 5px #cccc;
}

header {
    background: #f6f6f6;
    border-bottom: 1px solid #ccc;
    padding: 0.15em 0.5em;
    text-align: center;
}

main {
    background-color: #fff;
    flex: 1;
}

p {
    margin: 0.75em 0.5em;
}

.foot {
    font-size: 9pt;
    color: #999;
}

textarea
{
    background: white;
    border:solid 1px #ccc;
    display: block;
    font-family: "Minion Pro", serif;
    font-size: 12pt;
    height: 66vh;
    margin: 1em auto;
    min-width: 540px;
    outline: none;
    padding: 1em 1.5em;
    resize: none;
    width: 60vw;
}

@media only screen and (max-width: 600px) {

    textarea {
        min-width: 96vw;
    }
}

Gruß Jens
 
Kann sein, dass ich es falsch gemacht habe, aber das will nicht funktionieren.
Ich habe jetzt mal diese Lösung probiert:

CSS:
* {
    box-sizing: border-box;
}

…

footer {
    background: #f6f6f6;
    border-top: 1px solid #ccc;
    bottom: 0;
    height: 42px;
    margin: 0;
    padding: 0;
    position: fixed;
    text-align: center;
    width: 100vw;
}

h1 {
    color: #39c;
    font-size: 14pt;
    font-weight: normal;
    margin-top: calc((42px - 1em) / 2);
    padding: 0;
    text-shadow: 1px 2px 5px #cccc;
    vertical-align: middle;
}

header {
    background: #f6f6f6;
    border-bottom: 1px solid #ccc;
    height: 42px;
    margin: 0;
    padding: 0;
    text-align: center;
}

main {
    background-color: #fff;
    flex: 1;
}

…

textarea
{
    background: white;
    border:solid 1px #ccc;
    display: block;
    font-family: "Minion Pro", serif;
    font-size: 12pt;
    height: calc(100vh - 84px - 2em);
    margin: 1em auto;
    min-width: 540px;
    outline: none;
    padding: 1em 1.5em;
    resize: none;
    width: 60vw;
}

…

Im Desktop-Browser klappt das gut, aber leider nicht auf dem Tablet und dem Handy, weil da offenbar noch die Browserelemente herausgerechnet werden müssten (s. Screenshot), aber ich habe keine Ahnung, wie. 😌

Gruß Jens

IMG_5962.PNG
 
uburoi schrieb:
Kann sein, dass ich es falsch gemacht habe, aber das will nicht funktionieren.
Ich habe jetzt mal diese Lösung probiert:

CSS:
* {
    box-sizing: border-box;
}

…

footer {
    background: #f6f6f6;
    border-top: 1px solid #ccc;
    bottom: 0;
    height: 42px;
    margin: 0;
    padding: 0;
    position: fixed;
    text-align: center;
    width: 100vw;
}

h1 {
    color: #39c;
    font-size: 14pt;
    font-weight: normal;
    margin-top: calc((42px - 1em) / 2);
    padding: 0;
    text-shadow: 1px 2px 5px #cccc;
    vertical-align: middle;
}

header {
    background: #f6f6f6;
    border-bottom: 1px solid #ccc;
    height: 42px;
    margin: 0;
    padding: 0;
    text-align: center;
}

main {
    background-color: #fff;
    flex: 1;
}

…

textarea
{
    background: white;
    border:solid 1px #ccc;
    display: block;
    font-family: "Minion Pro", serif;
    font-size: 12pt;
    height: calc(100vh - 84px - 2em);
    margin: 1em auto;
    min-width: 540px;
    outline: none;
    padding: 1em 1.5em;
    resize: none;
    width: 60vw;
}

…

Im Desktop-Browser klappt das gut, aber leider nicht auf dem Tablet und dem Handy, weil da offenbar noch die Browserelemente herausgerechnet werden müssten (s. Screenshot), aber ich habe keine Ahnung, wie. 😌

Gruß Jens

Anhang anzeigen 1008062
das sollte keinen Einfluss haben, da vw und vh nur auf dem inneren Bereich ausgelegt sind. MobileBrowser sind teilweise etwas störrisch, wenn es um Cache-Leerung geht. Hast Du das auch mal im "Inkognito" Modus getestet?
 
Nein, noch nicht. Ich mache jetzt erstmal Pause, weil ich etwas genervt bin. Die Algorithmen im Hintergrund sind nicht so das Problem, aber dass ich jetzt so lange frickeln muss, um eine simple Textarea ordentlich auf den Schirm zu bringen, hatte ich nicht vorausgesehen. 😒

Gruß Jens
 
Deine erste Variante müsste in Firefox funktionieren, und in Chrome ebenfalls, wenn Du bei .body "min-height" durch "height" ersetzt.
 
CSS:
* {
    box-sizing: border-box;
}

body {
    background: #fff;
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
    margin: 0;
    min-height: 100vh;
    padding-top: 0;
}

footer {
    background: #f6f6f6;
    border-top: 1px solid #ccc;
    bottom: 0;
    /* margin-top: 1em; */
    padding: 0.15em;
    /* position: fixed; */
    text-align: center;
    width: 100vw;
}

h1 {
    color: #39c;
    font-size: 14pt;
    font-weight: normal;
    padding: 0em 0.75em;
    text-shadow: 1px 2px 5px #cccc;
}

header {
    background: #f6f6f6;
    border-bottom: 1px solid #ccc;
    padding: 0.15em 0.5em;
    text-align: center;
}

main {
    background-color: #fff;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

p {
    margin: 0.75em 0.5em;
}

.foot {
    font-size: 9pt;
    color: #999;
}

textarea
{
    background: white;
    border: solid 1px #ccc;
    display: block;
    font-family: "Minion Pro", serif;
    font-size: 12pt;
    height: 66vh;
    margin: 1em auto;
    min-width: 540px;
    outline: none;
    padding: 1em 1.5em;
    resize: none;
    width: 60vw;
    flex: 1;
}

@media only screen and (max-width: 600px) {

    textarea {
        min-width: 96vw;
    }
}
So funktionierts :)
Wenn du den Footer fixed positionierst kann seine Höhe nicht im Flow berücksichtigt werden.
 
Vielen Dank für die Mühe! 👍

Das werde ich nachher mal ausprobieren.

Gruß Jens
 
Korrektur:
Du kannst das textarea auch horizontal zentrieren indem du für main align-items: center; angibst (oben steht fälschlicherweise align-content), damit sparst du dir das auto-margin in der Horizontalen:

CSS:
main {
    background-color: #fff;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

textarea
{
    background: white;
    border: solid 1px #ccc;
    display: block;
    font-family: "Minion Pro", serif;
    font-size: 12pt;
    height: 66vh;
    /*margin: 1em auto;*/
    min-width: 540px;
    outline: none;
    padding: 1em 1.5em;
    resize: none;
    width: 60vw;
    flex: 1;
}
 
Das hat funktioniert, herzlichen Dank nochmal!

Jetzt bleibt als ungelöstes Problem noch, dass im mobilen Browser der untere Teil vom Menü verdeckt wird und sich in der Höhe nicht automatisch anpasst. 😌

Gruß Jens

IMG_5979.PNG
 
Das funktioniert leider nicht; dann wird der ganze Body nur als schmaler Spalt am oberen Fenterrand angezeigt. 🤷‍♂️

Gruß Jens
 
hm... vielleicht hab ich was vergessen, hier nochmal das ganze Stylesheet, damit gehts bei mir und der body hat die voll Höhe:

CSS:
* {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    background: #fff;
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
    margin: 0;
    /* min-height: 100vh; */
    padding-top: 0;
    height: 100%;
}

footer {
    background: #f6f6f6;
    border-top: 1px solid #ccc;
    bottom: 0;
    /* margin-top: 1em; */
    padding: 0.15em;
    /* position: fixed; */
    text-align: center;
    width: 100vw;
}

h1 {
    color: #39c;
    font-size: 14pt;
    font-weight: normal;
    padding: 0em 0.75em;
    text-shadow: 1px 2px 5px #cccc;
}

header {
    background: #f6f6f6;
    border-bottom: 1px solid #ccc;
    padding: 0.15em 0.5em;
    text-align: center;
}

main {
    background-color: #fff;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

p {
    margin: 0.75em 0.5em;
}

.foot {
    font-size: 9pt;
    color: #999;
}

textarea
{
    background: white;
    border: solid 1px #ccc;
    display: block;
    font-family: "Minion Pro", serif;
    font-size: 12pt;
    height: 66vh;
    margin: 1em auto;
    min-width: 540px;
    outline: none;
    padding: 1em 1.5em;
    resize: none;
    width: 60vw;
    flex: 1;
}

@media only screen and (max-width: 600px) {

    textarea {
        min-width: 96vw;
    }
}
 
  • Gefällt mir
Reaktionen: uburoi
Jetzt funktioniert es, wie es soll; damit kann ich weiterarbeiten. Vielen lieben Dank noch einmal für die Unterstützung! 👍

Ich bin wirklich froh, dass ich mit dem Gefrickel nicht mein Geld verdienen muss – das würde mich in den Wahnsinn treiben … 🙈

Gruß Jens
 
  • Gefällt mir
Reaktionen: floq0r
Ich habe mich mal ein Weilchen mit HTML beschäftigt, aber das ist schon knapp 20 Jahre her – da hat sich augenscheinlich einiges getan, vorsichtig formuliert. Und lieben lernen werde ich es wohl nie. 😄

Eigentlich hatte ich mir in den Kopf gesetzt, mein Projekt, das ich > hier schon einmal kurz vorgestellt hatte, als Webanwendung umzusetzen, aber das habe ich mir offenbar leichter vorgestellt, als es ist. Von daher werde ich es erstmal auf die lange Bank schieben, bis ich wieder mehr Zeit habe, Neues auszuprobieren …

Gruß Jens
 
Zurück
Oben