nicht angemeldet
oxo888oxoHallo
Ich habe jetzt nochmal einen Versuch gemacht. Da habe ich die 4 Bereiche <header>, <nav>, <main> und <footer> mit unterschiedlichen Hintergrundfarben einfärben. Der Zweck ist, dass ich damit das Layout-Gerüst für mich erstmal leichter sichtbar und verstehbar mache.
Jetzt kleben die Elemente ja alle oben. Wenn ich die Elemente jetzt mit Inhalten füllen, werden die ja jeweils nach unten länger.
Wenn ich aber nun z.B. im <main> nur recht wenig Inhalt habe, wird der Bereich ja immer noch recht kürz. Und das schaut dann ja schon nicht schön aus. Wie mache ich es denn, dass in meinem Beispiel der <main> Bereich mindestens den restlichen Platz in der Höhe (nach Abzug von header, nav und footer einnimmt? Und wenn das geht, ist es denn überhaupt sinnvoll, dass so zu machen? Oder fängt man sich da dann wieder andere Folge-Probleme ein?
Hier nun mein neuer Versuch-Code:
<!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;
border: 1px solid grey;
min-height: 100vh;
}
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>
NAVIGATION<br>
Hier wird die Navigation erscheinen.
</p>
</nav>
<main>
<h1>INHALT</h1>
<p>
Hier soll dann der eigentliche Seiteninhalt hin. Mit Texten,. Bildern und all den feinen Sachen
<p>
<h2>Feine Sachen</h2>
<p>
Was das für feine Sachen werden, wird noch nicht verraten :-)
</p>
</main>
<footer>
<p>
Fuß<br>
Hier werde ich meine Füße zeigen :-) Hehe ... ne natürlich nicht. Hier kommt der klassische Krempel hin, der in so einen Footer gehört.
</p>
</footer>
</body>
</html>
Und hier noch ein Link, um sich das anzugucken: https://spaceart.de/_xxx2.php
Gruß Ingo
Rolf B
Matthias Scharwies
Gunnar Bittersmann
Der Martin
Henry