nicht angemeldet
oxo888oxoHallo Matthias
Ja! Probier's doch mal aus.
Ja stimmt natürlich :-) Ich habe jetzt mal weiter gebaut. Code siehe unten. Ich habe da aber noch ein echtes Brett vor dem Kopf. Und zwar bei der Höhe der Zeilen. Im Grunde möchte ich es ja so haben:
-
Header Soll automatisch so hoch sein, wie dessen Inhalt (z.B. eine Header Grafik).
-
Nav Soll automatisch so hoch sein, wie dessen Inhalt.
-
Main Wenn alle 4 Bereiche zusammen die Höhe des Browerfensters nicht füllen, soll dieser Bereich einfach den fehlenden Platz auffüllen.
-
Footer Soll automatisch so hoch sein, wie dessen Inhalt.
Müsste das nicht mit folgendem Code gehen? grid-template-rows: auto auto 1fr auto
Tut es aber leider nicht. Schaut hier: https://spaceart.de/_xxx4.php
Wenn alle 4 Bereiche zusammen die Höhe des Browserfensters nicht vollbekommen, wachsen alle 4 Bereiche in der Höhe. Dabei sollte doch nur der Main-Bereich wachsen.
Ich kapiere das leider nicht. Was ist denn da falsch?
Gruß Ingo
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-Grid-Layout</title>
<style>
body {
max-width: 62rem;
margin: 0rem auto 0rem auto;
min-height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr auto
grid-template-areas:
"header"
"nav"
"main"
"footer";
grid-gap:1em;
}
body>* {
border: 1px solid grey;
}
header {
background:tomato;
}
nav {
background:lightgreen;
}
main {
background:gold;
}
footer {
background:lightblue;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<header >
<p>
KOPF<br>
Hier soll später eine schöne Grafik sitzen. So in der Art wie ein Banner.
</p>
</header>
<nav>
<p>
<ul>
<li><a href="#">NAVIGATION 1</a></li>
<li><a href="#">NAVIGATION 2</a></li>
<li><a href="#">NAVIGATION 3</a></li>
<li><a href="#">NAVIGATION 4</a></li>
<li><a href="#">NAVIGATION 5</a></li>
</ul>
</p>
</nav>
<main>
<h1>INHALT</h1>
<h2>Feine Sachen</h2>
<p>
Hier soll dann der eigentliche Seiteninhalt hin. Mit Texten,. Bildern und all den feinen Sachen. Hier soll dann der eigentliche Seiteninhalt hin. Mit Texten,. Bildern und all den feinen Sachen. Hier soll dann der eigentliche Seiteninhalt hin. Mit Texten,. Bildern und all den feinen Sachen. Hier soll dann der eigentliche Seiteninhalt hin. Mit Texten,. Bildern und all den feinen Sachen. Hier soll dann der eigentliche Seiteninhalt hin. Mit Texten,. Bildern und all den feinen Sachen. Hier soll dann der eigentliche Seiteninhalt hin. Mit Texten,. Bildern und all den feinen Sachen. Hier soll dann der [bla bla bla]
<p>
</main>
<footer>
<p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</p>
</footer>
</body>
</html>
Rolf B
Matthias Scharwies
Gunnar Bittersmann
Der Martin
Henry