ich habe einen funktionierenden Quelltext:
HTML-Code:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filter</title>
<style type="text/css">
body {
/* auf Grid umstellen */
display: grid;
/* Grid Bereiche festlegen */
grid-template-areas:
"header header"
"navigation main"
"footer footer";
/* Rows Höhe und col Breite festlegen 1fr=> ??*/
grid-template-rows: auto 1fr auto;
grid-template-columns: minmax(100px, 200px) 1fr ;
min-height: 100vh;
}
.grid-header {
grid-area: header;
background-color:#fee;
}
.grid-menu {
grid-area: navigation;
background-color: #eef;
}
.grid-main {
grid-area: main;
}
.grid-footer {
grid-area: footer;
background-color:#fee;
}
.grid-footer ul {
display: flex;
list-style-type: none;
}
</style>
</head>
<body>
<header class="grid-header">
<p>kopfzeile</p>
</header>
<nav class="grid-menu">
<ul> <li> item 1</li> <li> item 2 </li> </ul>
<?php
//include("filter.php");
?>
</nav>
<main class="grid-main">
<div style = "overflow-y: scroll;">
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
<h1> Best content ever </h1>
</div>
</main>
<footer class="grid-footer">
<ul> <li> item 1</li> <li> item 2 </li> </ul>
</footer>
</body>
</html>