Warum funktioniert „position: sticky' in meiner Fußzeile nicht, wenn die Höhe des Seitenkörpers und das #main-Element angegeben sind?

Position: Sticky funktioniert nicht, wenn die Höhe angegeben ist

Problem:

Benutzer stoßen auf ein Problem wo die Fußzeile, die als #footerNav bezeichnet wird, sich nicht an die Position hält: Sticky-Verhalten, wenn eine Höheneigenschaft sowohl für den Seitenhauptteil als auch für #main festgelegt ist Element. Die Fußzeile bleibt statisch, anstatt am oberen Rand des Ansichtsfensters zu scrollen.

Lösung:

Das Problem entsteht durch den Überlauf von Inhalten, der durch die Höheneigenschaften verursacht wird. position: sticky ist so konzipiert, dass es nur dann aktiv wird, wenn sein enthaltender Block einen bestimmten Schwellenwert erreicht. In diesem Fall wird body { height: 100%; } erzeugt eine Situation, in der die Fußzeile sofort das Ende ihres enthaltenden Blocks erreicht, wodurch verhindert wird, dass position: sticky jemals aktiviert wird.

Erklärung:

Gemäß der Definition von Position : Sticky, die Sticky-Position wird angewendet, wenn das Element einen angegebenen Schwellenwert innerhalb seines enthaltenden Blocks überschreitet. Der enthaltende Block ist in diesem Fall der Körper, und da body { height: 100 % } festgelegt ist, ist die Höhe des Körpers auf das Ansichtsfenster beschränkt.

Wenn #main { height: 92 % } angegeben ist 92 % der verfügbaren Höhe werden #main zugewiesen, sodass nur 8 % für #footerNav übrig bleiben. Da sich #footerNav bereits am unteren Rand seines enthaltenden Blocks (des Körpers) befindet, kann es nicht über die Ansichtsfenstergrenze hinaus scrollen und Position: Sticky aktivieren.

Lösung:

Um das Problem zu beheben, stellen Sie sicher, dass der Inhalt den enthaltenden Block nicht überfüllt. Dies kann erreicht werden, indem die Höheneigenschaften von body und #main entfernt werden, sodass der Inhalt auf natürliche Weise innerhalb des Ansichtsfensters fließen kann, ohne dass es zu einem Überlauf kommt.

Zusätzliche Hinweise:

• Die Angabe der Höhe als Prozentsatz, wie z. B. vh, ist immer noch nicht ratsam, da dies zum gleichen Problem führen kann.
• Das Problem ist in Firefox aufgetreten 61 (Nightly), Safari 53 (Tech Preview) und Chrome 65.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „position: sticky' in meiner Fußzeile nicht, wenn die Höhe des Seitenkörpers und das #main-Element angegeben sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!