Impressum u.a. an unteres Ende des Viewports

[Kniffel]

Hallo!

Wie erreiche ich, dass eine Fußzeile stets am unteren Ende des Viewports angezeigt wird, auch wenn man bei längeren Inhalten nach unten scrollt?

[Felix Riesterer]

Liebe(r) Kniffel,

vielleicht findest Du in unserem Holy-Grail-Layout etwas Nützliches?

Liebe Grüße

Felix Riesterer

[Matthias Scharwies]

Guten Morgen!

Wie erreiche ich, dass eine Fußzeile stets am unteren Ende des Viewports angezeigt wird, auch wenn man bei längeren Inhalten nach unten scrollt?

https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:CSS-grid-layout-fix-footer.html

Das Grid-Beispiel zeigt nur, wie man wenig Inhalt über den gesamten Viewport verteilt.

Sobald der Inhalt größer als 100vh ist, „verschwindet“ der footer nach unten.

Dafür wurde position:sticky geschaffen:

Beispiel:CSS-sticky-footer.html

Dieses Beispiel sollte das Gewünschte tun.

Herzliche Grüße
Matthias Scharwies

[Rolf B]

Hallo Matthias,

funktioniert auf meinem Handy gar nicht perfekt, muss ich mir mal angucken

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

funktioniert auf meinem Handy gar nicht perfekt, muss ich mir mal angucken

Jetzt geht's, da war noch float (die Älteren unter uns werden's noch kennen) drin!

Herzliche Grüße
Matthias Scharwies

[Rolf B]

Hallo Matthias,

yup

Rolf

[Gunnar Bittersmann]

@@Matthias Scharwies

float (die Älteren unter uns werden's noch kennen)

Die Jüngeren hoffentlich auch noch. Nur halt nicht fürs Seitenlayout, sondern da, wo was umflossen werden soll. Rettet die Rathausuhr!

🖖 Live long and prosper

[Kniffel]

Hallo Matthias

Beispiel:CSS-sticky-footer.html

Dieses Beispiel sollte das Gewünschte tun.

In der Tat!👍

Was mir aufgefallen ist, am Ende der Source steht <div class="wrapper">. Allerdings finde ich keine Definition im CSS.

Vielen Dank und Grüße

Kniffel

[Kniffel]

... und noch etwas fällt mir auf:

Auch die Navigation „klebt“ 10em von oben entfernt immer im Sichtbereich des Nutzers

Dies funktioniert bei mir nicht.

Gruß

(@ Felix der) Kniffel

[Rolf B]

Hallo Kniffel,

das div mit der Klasse wrapper ist obsolet und kann weg.

Die Navigation klebt bei mir auch nicht. Nur der header. Das ist ein Versprechen, dass vom Beispiel nicht mehr eingelöst wird. In der Version von 2022 war für nav noch ein position:sticky drin. Entweder muss man das nachziehen, oder den Absatz aus dem Beispiel löschen.

Was etwas nervt, ist das Padding am body, was aber zur stärkeren Visualisierung des sticky-Effekts dient und beim praktischen Einsatz nicht nachgemacht werden muss.

Eventuell hast Du eine veraltete Version im Browser-Cache?

Rolf

[Matthias Scharwies]

Guten Morgen Kniffel,

Was mir aufgefallen ist, am Ende der Source steht <div class="wrapper">. Allerdings finde ich keine Definition im CSS.

Es ist entfernt. Ein Beispiel sollte ja nur das Nötige zeigen, um nicht abzulenken.

Andererseits könnte man auch HTML verwenden, für das es (noch) keine CSS-Festlegungen gibt. Dann greifen die Default-Einstellungen der Browser, bei div eben nichts.

---

Trotzdem müsste jemand immer wieder alle Seiten durchforsten und ein Feedback geben.

Ich habe in diesem Beispiel jetzt ein (responsives) Grid eingebaut und die Textfarbe im roten footer auf weiß gestellt.

In einem anderen Beispiel habe ich nav li {width: 22%;}durch
width: min-content; ersetzt.

Wenn euch bei anderen Beispielen was auffällt, meldet euch!

Herzliche Grüße
Matthias Scharwies

[encoder]

Nachdem du jetzt weißt wie es geht, kannst du ja immer noch überlegen ob ständige Sichtbarkeit wirklich von Nutzen ist oder nur unnötig Platz für den Rest des Inhalts wegnimmt 😉
Grad auf kleinen Bildschirmen ist man doch froh um alles was nicht dauernd sichtbar ist.

[Gunnar Bittersmann]

@@encoder

Nachdem du jetzt weißt wie es geht, kannst du ja immer noch überlegen ob ständige Sichtbarkeit wirklich von Nutzen ist oder nur unnötig Platz für den Rest des Inhalts wegnimmt 😉
Grad auf kleinen Bildschirmen ist man doch froh um alles was nicht dauernd sichtbar ist.

Ja.

Bei meiner Übersicht über die Episoden aller Star-Trek-Serien hab ich das so gemacht, dass der Footer initial zu sehen ist, beim Runterscrollen dann aber verschwindet, um am Seitenende wieder aufzutauchen.

Den Kniff dafür hatte ich hier im Forum mal beschrieben.

BTW, ans selbe Event wie für die Aufhebung der fixen Position des Footers gekoppelt ist das Erscheinen der Trennlinie unter dem Header, die anfangs störend aussähe, und die man ja erst braucht, wenn der Seiteninhalt unter den Header scrollt.

🖖 Live long and prosper