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.
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>
<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%; }
Kommentar