„Position: Sticky“ funktioniert nicht, wenn „Höhe“ definiert ist ⇐ HTML

[Guest]

Ich erstelle eine Landingpage, bei der der Benutzer zunächst einen Hauptbereich mit einer Fußzeile darunter sieht. Wenn man weiter nach unten scrollt, erkennt man, dass es sich bei der Fußzeile um eine Sticky-Kopfzeile handelt, und mein Ziel ist es, reines CSS zu verwenden, um dies zu erreichen. Um die Vollbilddarstellung des Hauptinhalts und der Fußzeile zu erhalten, habe ich die Eigenschaft height auf zwei verschiedene Werte gesetzt: 92 % und 8 % (die Verwendung von vh funktioniert auch nicht). Unabhängig von der Höhe, die ich in meinem CSS spezifiziere (verschiedene Einheiten und alle), bleibt mein Fußzeilen-Div nicht hängen. Sobald ich die Eigenschaft height entferne, funktioniert es wie vorgesehen.
Hier ist ein Screenshot meiner Seite vor dem Entfernen der height Eigenschaften:


Wie Sie sehen können, bleibt es nicht hängen:


Nach dem Entfernen der Höhe< /code>-Eigenschaftswerte, es klebt:
[img]https://i.sstatic.net /QeSD5.png[/img]

Unterhalb der relevanten Code:

Code: Select all

html,
body {
height: 100%;
margin: 0;
}

#main {
height: 92%;
}

#landing {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
}

#landingContent {
width: 20vw;
}

#footerNav {
height: 8%;
display: flex;
align-items: center;
position: -webkit-sticky;
position: sticky;
top: 0px;
}

Code: Select all

Logo
Lorem ipsum, paragraph content, etc etc.
Button





Logo


Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello
Hello

Ich habe gelesen, dass die Verwendung der Eigenschaft overflow problematisch sein kann , obwohl es nicht vorhanden ist und ich auch nichts darüber gehört habe, dass die Körpergröße für andere ein Problem darstellt. Ich könnte mich natürlich irren.
Ich habe getestet auf:

• Firefox 61 (Nightly)
  Safari 53 (Tech Preview)
• Chrome 65

Hinweis – Entfernen des height-Eigenschaft von #main behält #footerNav bei klebrig.