zurck zur Startseite
  


Zurck 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, 21:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beitrge: 28
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, 22:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beitrge: 1.099
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 erfllen 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 Hhe vom nav- und vom footer-Element passt sich dem jeweiligen Inhalt an, ohne das Grenangaben gendert werden mssen.

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, 17:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beitrge: 28
crane befindet sich auf einem aufstrebenden Ast
Standard

Schon mal Danke fr die Antwort. Aber so 100% ist das nicht die Lsung die ich suche. Ich mchte das die Navigationsleiste immer oben verankert ist und nicht mit scrollt. Aktuell bewegt sich beim scrollen alles. Ich mchte 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, 10:17
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beitrge: 4.966
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 fr die Antwort. Aber so 100% ist das nicht die Lsung die ich suche. Ich mchte 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, 16:48
Benutzerbild von wandler
Benutzer
neuer user
 
Registriert seit: 11.01.2006
Beitrge: 48
wandler befindet sich auf einem aufstrebenden Ast
Standard

Hallo,
eventuell suchst du nach so einer Lsung. 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

Stichwrter
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 Beitrge zu antworten.
Es ist Ihnen nicht erlaubt, Anhnge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beitrge 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 14:29
Seite aus iFrame raushalten: klappt nicht in FF und Chrome Kangooroo (X)HTML 6 29.04.2010 10:29
Footer am Ende der Seite killerkonner CSS 15 11.04.2010 17:59
Probleme mit dem Layout: divanordnung Muckel CSS 8 29.06.2008 11:28
Darstellungsfehler im Footer / rechte Seite hoerbuch2000 CSS 0 08.02.2007 15:49


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:34 Uhr.