|
|||
scrollable seite und footer immer ganz unten
Hallo alle zusammen,
ich habe ein kleines Anliegen. Ich habe 3 Div blöcke 1. ganz oben die Navigation 2. in der mitte den Contant 3. ganz unten den footer ich möchte das die Navigation ganz oben ist dort verankert. dann möchte ich genau darunter den contant haben. dieser soll zusammen mit dem footer immer mindestens bis zum bildschirm ganz nach unten gehen ohne das ein leerraum entsteht. Falls mal der Contant größer wird dann darf auch der footer entsprechend weiter nach unten rücken und außerhalb des sichtbaren bereichs verschoben werden, d.h. dann wird die ganze seite scrollbar um dann auch den footer wieder sehen zu können. nun meine frage. was für wichtige informationen muss welchem div block mitgeben um dies realisieren zu können. Ich habe noch nicht herausgefunden was wo hin muss. Ich hoffe ihr versteht meine Frage und könnt mir dabei helfen. Vielen lieben Dank |
Sponsored Links |
|
|||
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> |
Sponsored Links |
|
|||
Schon mal Danke für die Antwort. Aber so 100% ist das nicht die Lösung die ich suche. Ich möchte das die Navigationsleiste immer oben verankert ist und nicht mit scrollt. Aktuell bewegt sich beim scrollen alles. Ich möchte aber das sich nur der contant und der footer bewegen, so wie z.B. auf dieser Seite:
https://www.fitness-schurke.de/ |
Stichwörter |
100% height, contant, footer, navbar, scrollable |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Sticky Footer Probleme im Internet Explorer | KatiF | CSS | 2 | 25.02.2014 15:29 |
Seite aus iFrame raushalten: klappt nicht in FF und Chrome | Kangooroo | (X)HTML | 6 | 29.04.2010 11:29 |
Footer am Ende der Seite | killerkonner | CSS | 15 | 11.04.2010 18:59 |
Probleme mit dem Layout: divanordnung | Muckel | CSS | 8 | 29.06.2008 12:28 |
Darstellungsfehler im Footer / rechte Seite | hoerbuch2000 | CSS | 0 | 08.02.2007 16:49 |