Wie klebe ich eine Fußzeile mit einer festen Kopfzeile am Ende einer Seite fest?

So positionieren Sie eine Fußzeile unten auf einer Seite mit einer festen Kopfzeile

Um eine Fußzeile unten zu positionieren einer Seite zwar auch über eine feste Kopfzeile verfügt, ist es jedoch notwendig, einen Ansatz zu wählen, der nicht auf „Position: fest“ beruht, wodurch die Fußzeile relativ zum Ansichtsfenster platziert würde anstelle der Seite selbst.

Nutzung der Methode von Ryan Fait

Ryan Faits Ansatz ist unkompliziert und effektiv für Szenarien, in denen sowohl die Kopf- als auch die Fußzeile eine feste Höhe haben:

1. Legen Sie die Höhe beider und Elemente auf 100 %.
2. Geben Sie dem #content-Element eine Mindesthöhe von 100 %, um die #Fußzeile auf der Seite nach unten zu verschieben.
3. Verwenden Sie einen negativen Rand unten für #content, um die Fußzeile zu verschieben nach unten.
4. Passen Sie die Positionierung der Fußzeile relativ zum #Inhalt an, um sicherzustellen, dass sie angezeigt wird oben.
5. Fügen Sie einen Abstandshalter hinzu oder verwenden Sie padding-bottom und box-sizing für #content, um überschüssigen Inhalt zu verwalten und zu verhindern, dass er sich mit der Fußzeile überlappt.

Einbinden the Header

Wenn der Header in seinem normalen Fluss bleiben soll, fügen Sie ihn einfach innerhalb von #content hinzu. Um es absolut zu positionieren, können Sie einen Abstandshalter oder die Kombination aus Padding-Top und Box-Sizing verwenden.

Kompatible Browser und Alternativen

Moderne Browser unterstützen Box -Größe: Randfeld. Für eine breitere Browserunterstützung sollten Sie stattdessen die Verwendung von Abstandselementen in Betracht ziehen.

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