Einzelnen Beitrag anzeigen
  #5 (permalink)  
Alt 05.03.2021, 16:48
Benutzerbild von wandler
wandler wandler ist offline
Benutzer
neuer user
 
Registriert seit: 11.01.2006
Beiträge: 48
wandler befindet sich auf einem aufstrebenden Ast
Standard

Hallo,
eventuell suchst du nach so einer Lösung. Hier bleibt NAV immer oben und der Footer immer sichtbar im Browserfester unten (auch bei viel Inhalt). Falls das beim Footer nicht so sein soll, einfach overflow-y entfernen.

HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Sticky Layout</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style>
      body {
         height: 100vh;
         margin: 0;
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: auto 1fr auto;
      }
      nav {
         background-color: darkslategray;
         color: white;
         grid-row-start: 1;
         grid-row-end: 2;
      }
      main {
         background-color: skyblue;
		 grid-row-start: 2;
         grid-row-end: 3;
         overflow-y: auto;
      }
      footer {
         background-color: darkslategray;
         color: white;
         grid-row-start: 3;
         grid-row-end: 4;
      }
   }
   </style>

</head>
<body>
   <nav>
      <p>nav</p>
   </nav>
   <main>
      <p>main</p>
   </main>
   <footer>
      <p>footer</p>
   </footer>
</body>
</html>
__________________
Coden ist keine Esoterik, also lasst uns an eurem Wissen teilhaben ihr Gurus
Mit Zitat antworten