Warum funktioniert „position: sticky' nicht mit einer definierten Elementhöhe?

'position: sticky' funktioniert nicht, wenn 'height' definiert ist

Grundlagen der Sticky-Positionierung

Sticky-Positionierung, as Definiert durch CSS, arbeitet innerhalb eines Flow-Stamms (typischerweise das Browser-Ansichtsfenster oder ein scrollbarer Container) und ermöglicht es Elementen, bis zu bestimmten Bedingungen relativ zu ihrer Umgebung fixiert zu bleiben erfüllt sind. Wenn ein Element den angegebenen Schwellenwert erreicht (z. B. einen oberen Versatz vom Ansichtsfenster), bleibt es an Ort und Stelle „stecken“, bis es die gegenüberliegende Kante seines enthaltenden Blocks erreicht.

Überlauf, der die Sticky-Funktionalität beeinträchtigt

In dem gegebenen Szenario, in dem „Position: Sticky“ auf ein Element angewendet wird, das Verhalten jedoch nicht wie erwartet ist, ist es wichtig, Folgendes zu berücksichtigen Der enthaltende Block des Elements und eventuell vorhandener Überlauf.

Beziehung zwischen Element und enthaltendem Block

Im bereitgestellten Code ist das Element mit „position: sticky“ (#footerNav ) hat seinen enthaltenden Block auf „html, body“ gesetzt. Da das CSS „html, body { height: 100 % }“ definiert, wird das gesamte Ansichtsfenster zum enthaltenden Block.

Überlaufproblem

Da jedoch #main div hat eine „Höhe: 92 %“-Eigenschaft, während #footerNav eine „Höhe: 8 %“ hat, läuft der Inhalt über die kombinierte „Höhe“ hinaus. Werte. Dieser Überlauf erzeugt einen erweiterten Begrenzungsblock, der es dem Sticky-Element ermöglicht, vorzeitig die gegenüberliegende Kante zu erreichen (d. h. am unteren Ende von #main). Dadurch erscheint das Sticky-Element am Ende von #main fixiert, anstatt hängen zu bleiben, bis es den unteren Rand des Browserfensters erreicht.

Lösung

Zu lösen Um das Problem zu lösen, kann man die Höhenbeschränkungen für das #main-Element entfernen, sodass der Inhalt auf natürliche Weise überlaufen kann. Dadurch wird sichergestellt, dass der Scroll-Container im gesamten Ansichtsfenster bleibt und das Sticky-Element wie erwartet funktioniert und hängen bleibt, bis es den tatsächlichen unteren Rand der Seite erreicht.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „position: sticky' nicht mit einer definierten Elementhöhe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!