Einzelnen Beitrag anzeigen
  #2 (permalink)  
Alt 17.02.2021, 23:25
MrMurphy MrMurphy ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.092
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Ich habe mal eine Beispielseite erstellt, die deine Anforderungen erfüllen sollte.

Das nav-Element ist oben und bleibt auch beim Scrollen sichtbar.

Das footer-Element ist bei wenig Inhalt immer unten. Wenn der Inhalt nicht mehr auf eine Seite passt rutscht er nach unten und wird beim scrollen am Schluß des Inhalts sichtbar.

Die Höhe vom nav- und vom footer-Element passt sich dem jeweiligen Inhalt an, ohne das Größenangaben geändert werden müssen.

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 {
         min-height: 100vh;
         margin: 0rem 0rem 0rem 0rem;
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: auto 1fr auto;

      }
      body>* {
         padding: 1rem;
      }
      nav {
         background-color: darkslategray;
         color: white;
         position: sticky;
         z-index: 1;
         top: 0px;
      }
      main {
         background-color: skyblue;
      }
      footer {
         background-color: darkslategray;
         color: white;
      }
   }
   </style>

</head>
<body>
   <nav>
      <p>nav</p>
   </nav>
   <main>
      <p>main</p>
   </main>
   <footer>
      <p>footer</p>
   </footer>
</body>
</html>
Mit Zitat antworten
Sponsored Links