Wie behalte ich eine Fußzeile am Ende der Seite mit einer festen Kopfzeile?

Fußzeile am Ende der Seite mit fester Kopfzeile belassen

Problem:

Sie möchten die Fußzeile ganz unten auf der Seite platzieren, unter allen anderen Inhalten, und sie beim Scrollen an Ort und Stelle halten, ohne daran festzuhalten der Bildschirm wie eine feste Position.

Lösung:

Ryan Faits Methode

Dieser Ansatz eignet sich für Szenarien, in denen Sowohl die Kopf- als auch die Fußzeile haben feste Höhen. Dazu gehört:

1. Festlegen der Höhe von und auf 100 %, um sicherzustellen, dass der nächste Schritt funktioniert.
2. Geben Sie den
   Enthält den Seiteninhalt (#content) mit einer Mindesthöhe von 100 %.
3. Ziehen Sie die Fußzeile nach oben, indem Sie einen negativen Rand unten auf den #content anwenden, der der Höhe der Fußzeile entspricht, und setzen Sie ihre Position auf relativ.
4. Fügen Sie am Ende des #content ein Abstandselement hinzu oder verwenden Sie eine Kombination aus padding-bottom und box-sizing: border-box, um zu verhindern, dass sich Inhalte dahinter verstecken Fußzeile.

Hinzufügen der Kopfzeile

So fügen Sie eine Kopfzeile ein und behalten dabei die Position der Fußzeile bei:

1. Fügen Sie die Kopfzeile zum hinzu #Inhalt, wenn er im normalen Fluss bleiben soll.
2. Wenn die Kopfzeile eine absolute Positionierung erfordert, fügen Sie Abstandshalter hinzu oder verwenden Sie sie padding-top und box-sizing: border-box, um Überlappungen von Inhalten zu verhindern.

Überlegungen:

• Moderne Browser unterstützen box-sizing: border -Box, aber wenn eine breitere Unterstützung erforderlich ist, verwenden Sie Abstandshalter.
• Stellen Sie sicher, dass die Kopf- und Fußzeilenhöhen für diese Methode festgelegt sind Arbeit.

Das obige ist der detaillierte Inhalt vonWie behalte ich eine Fußzeile am Ende der Seite mit einer festen Kopfzeile?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!