Hui, eine Zeitreise. Wie findet man solche uralten Anleitungen? Das war wohl damals einmal aktuell aber heute kann man das vergessen (Ist nicht böse gemeint, bin nur verwundert)
Verwende display: grid; für deine Anforderungen.
in etwa so ein Aufbau:
Code:
<header class="grid-header">
<p>kopfzeile</p>
</header>
<nav class="grid-menu">
<ul> <li> item 1</li> <li> item 2 </li> </ul>
</nav>
<main class="grid-main">
<h1> Best content ever </h1>
</main>
<footer class="grid-footer">
<ul> <li> item 1</li> <li> item 2 </li> </ul>
</footer>
Code:
body {
display: grid;
grid-template-areas:
"header header"
"navigation main"
"footer footer";
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.grid-header {
grid-area: header;
}
.grid-menu {
grid-area: navigation;
}
.grid-main {
grid-area: main;
}
.grid-footer {
grid-area: footer;
}
.grid-footer ul {
display: flex;
list-style-type: none;
}