Warum funktioniert „Position: Sticky' nicht, wenn „Höhe' eingestellt wird?

'position:sticky' funktioniert nicht, wenn 'height' eingestellt wird

Wie Sie bemerkt haben, legen Sie die Höheneigenschaft in Ihrem Fußzeilenelement fest verhindert, dass es beim Scrollen nach unten am oberen Rand der Seite hängen bleibt. Dieses Verhalten tritt aufgrund der Funktionsweise des Sticky-Positionierungsalgorithmus auf.

Gemäß der CSS-Spezifikation wird ein Sticky-Element als relativ positioniert behandelt, bis sein enthaltender Block einen angegebenen Schwellenwert überschreitet. In Ihrem Fall ist der enthaltende Block das Körperelement, das eine Höhe von 100 % hat. Wenn das Hauptelement, das eine Höhe von 92 % hat, nach unten gescrollt wird, erreicht das Fußzeilenelement den unteren Rand des Körperelements und wird als am gegenüberliegenden Rand seines enthaltenden Blocks betrachtet. Daher wird es nicht mehr als klebrig behandelt und bleibt am Ende der Seite.

Um dieses Problem zu beheben, können Sie die Höheneigenschaft aus dem Hauptelement entfernen. Dadurch bleibt das Fußzeilenelement wie beabsichtigt am oberen Rand der Seite hängen. Alternativ können Sie die Höheneigenschaft des Körperelements auf 100 VH statt auf 100 % festlegen. Dadurch wird sichergestellt, dass das Körperelement immer die gleiche Höhe wie das Ansichtsfenster hat und das Fußzeilenelement unabhängig von der Höhe des Hauptelements am oberen Rand der Seite bleibt.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „Position: Sticky' nicht, wenn „Höhe' eingestellt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!