Eine kluge Kleberfußzeile -Technik

Wenn es um "klebrige Fußzeile" geht, denken die meisten Menschen heutzutage an position: sticky : Im Kontext des übergeordneten Elements wird das Fußzeilenelement auf dem Bildschirm festgelegt.

Dies ist jedoch nicht der Schwerpunkt dieses Artikels. Das Konzept der "klebrigen Fußzeile" erschien früher als position: sticky und seine Bedeutung war etwas anders. Die Idee ist: Auch wenn der Seiteninhalt nicht ausreicht, um sie nach unten zu drücken, hält er sich am unteren Bildschirmrand. Aber wenn es genügend Inhalte gibt, wird es gerne weiter unten geschoben.

Wir haben in der Vergangenheit fünf Implementierungsmethoden eingeführt, darunter einige moderne Technologien wie calc() , Flexbox und CSS Grid.

Jetzt ist die sechste Methode auf der Bühne! Der Leser Sílvio Rosa schlug die folgende Methode vor:

(Es ist am besten, einen mittelgroßen Desktop-Bildschirm anzusehen, da die klebrige Fußzeile bei dieser Bildschirmgröße meist am effektivsten ist.)

Der Code ist sehr präzise:

 html, Körper {Höhe: 100%;}

Körper> Fußzeile {
  Position: klebrig;
  TOP: 100VH;
}

Eine Sache, die ich darüber schätze, ist, dass es keine besonderen zusätzlichen Verpackungen für Nicht-Füßer-Inhalte erfordert.

Es ist auch etwas rätselhaft. Wenn ich top: 100vh; ; Aber genau das ist die Klugheit. Unabhängig von der Fußzeilegröße (keine magischen Zahlen erforderlich), und dann ist die klebrige Positionierung "es zurücksaugt", um an der unteren Kante zu haften. Aber es überschneidet sich nie mit Inhalten, daher ist es froh, unter Inhalt gedrückt zu werden, was das Kernprinzip des klebrigen Fußzeilenmusters ist.

Das obige ist der detaillierte Inhalt vonEine kluge Kleberfußzeile -Technik. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!