Ankündigung

Einklappen
Keine Ankündigung bisher.

Textarea geht bei height 100% über Gridhöhe hinaus

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Textarea geht bei height 100% über Gridhöhe hinaus

    Hallo,

    jemand ne Ahnung weshalb bei folgendem Code die Textarea über den Gridbereich rausschiesst ?
    Ziel ist es, dass sie sich nur auf die restliche Höhe in ihrem Gridbereich ausdehnt.

    <html>
    <body>

    <div class="header">Header</div>
    <div class="main">MAIN
    <form action="/action_page.php">
    <fieldset>
    <legend></legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <textarea>...</textarea>
    </fieldset>
    </form>

    </div>
    <div class="footer">FOOTER</div>

    </body>

    </html>
    Code:
    html, body {
      margin: 0;
      box-sizing: border-box;
      display: grid;
      height: 100vh;
      gap: 1px;
      text-align: center;
      grid-template-rows: auto 1fr auto;
    }
    
    body > div {
      background-color: skyblue;
      padding: 1em;
    
    }
    
    
    .main {
      background-color: blue;
    }
    
    
    form, fieldset {
      height: 100%;
      text-align: left;
    }
    
    
    textarea {
      height: 100%;
      width: 100%;
    
    }

  • #2
    verpasse fieldset ein grid und packe textarea in ein div.

    Kommentar


    • #3
      Hatte gehofft hier was mit mit ner Grid Eigenschaft die ich nicht kenne tricksen zu können.
      Dann werd ich wohl nicht rumkommen, deinem Rat zu folgen.

      Kommentar

      Lädt...
      X