zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden scrollable seite und footer immer ganz unten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.02.2021, 22:09
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beiträge: 33
crane befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.02.2021, 23:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
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
  #3 (permalink)  
Alt 18.02.2021, 18:27
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beiträge: 33
crane befindet sich auf einem aufstrebenden Ast
Standard

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/
Mit Zitat antworten
  #4 (permalink)  
Alt 22.02.2021, 11:17
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von crane Beitrag anzeigen
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.
Genau das passiert bei dem gezeigten Code, du machst etwas falsch. Wir Wissen aber nicht was.
Mit Zitat antworten
  #5 (permalink)  
Alt 05.03.2021, 17:48
Benutzerbild von wandler
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
Antwort

Stichwörter
100% height, contant, footer, navbar, scrollable

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:43 Uhr.