Heim > Artikel > Web-Frontend > Warum funktioniert meine „Position: Sticky'-Fußzeile nicht, wenn ich eine „Höhe'-Eigenschaft definiere?
'position: sticky' funktioniert nicht, wenn 'height' definiert ist
Bei der Verwendung von CSS zum Erstellen eines Sticky-Headers kommt es häufig vor Legen Sie die Höheneigenschaft des Fußzeilen-Div fest. Dies kann jedoch manchmal dazu führen, dass das Sticky-Verhalten fehlschlägt.
Der Grund dafür ist, dass die Sticky-Positionierung auf dem enthaltenden Block beruht, um den Sticking-Punkt zu bestimmen. Wenn die Höheneigenschaft für das Fußzeilen-Div definiert ist, wird es zum enthaltenden Block. Infolgedessen befindet sich das Fußzeilen-Div bereits am Rand seines enthaltenden Blocks und es gibt keinen Schwellenwert mehr, den es überschreiten muss, um das Sticky-Verhalten auszulösen.
Um dieses Problem zu beheben, entfernen Sie die Höheneigenschaft aus die Fußzeile div. Dadurch wird der Textkörper zum enthaltenden Block und das Fußzeilen-Div kann wie beabsichtigt am unteren Rand der Seite hängen bleiben.
Hier ist ein Beispiel dafür, wie das CSS geändert werden könnte, um das Sticky zu beheben Verhalten:
html, body { height: 100%; margin: 0; } #main { height: 92vh; } #landing { display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; } #landingContent { width: 20vw; } #footerNav { display: flex; align-items: center; position: -webkit-sticky; position: sticky; top: 0px; }
Mit dieser Änderung bleibt das Fußzeilen-Div nun wie beabsichtigt am Ende der Seite hängen.
Das obige ist der detaillierte Inhalt vonWarum funktioniert meine „Position: Sticky'-Fußzeile nicht, wenn ich eine „Höhe'-Eigenschaft definiere?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!