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!