Heim  >  Artikel  >  Web-Frontend  >  Warum funktioniert meine „Position: Sticky'-Fußzeile nicht, wenn ich eine „Höhe'-Eigenschaft definiere?

Warum funktioniert meine „Position: Sticky'-Fußzeile nicht, wenn ich eine „Höhe'-Eigenschaft definiere?

Barbara Streisand
Barbara StreisandOriginal
2024-11-11 09:50:02688Durchsuche

Why isn't my 'position: sticky' footer working when I define a 'height' property?

'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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn