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

Fußzeile am Ende einer Seite mit fester Kopfzeile positionieren

Das Problem und die Anforderungen verstehen:

Sie suchen um die Fußzeile am absoluten Ende der Seite zu positionieren, auch wenn eine feste Kopfzeile vorhanden ist. Dadurch entfällt die Verwendung von „position:fixed“ oder das Anordnen der Fußzeile am unteren Rand des sichtbaren Bildschirms.

Sticky-Footer-Methode von Ryan Fait:

Wir verwenden den Ansatz von Ryan Fait als es erfüllt Ihre spezifischen Anforderungen Bedingungen:

Schritte:

1. HTML und Körperhöhe auf 100 % setzen: Höhe definieren: 100 % für und um eine Ansichtsfensterhöhe von 100 % festzulegen.
2. Geben Sie dem Inhalt eine Mindesthöhe von 100 %: Weisen Sie #content eine Mindesthöhe von 100 % zu, um sicherzustellen, dass er die gesamte Ansichtsfensterhöhe einnimmt.
3. Fußzeile absolut und versetzt zum Inhalt positionieren: Um die Fußzeile unter #content zu positionieren, geben Sie #content ein ein negativer Rand unten, der der Höhe der Fußzeile entspricht. Positionieren Sie dann die #Fußzeile unbedingt so, dass sie über dem #Inhalt platziert wird.

4. Verhindern Sie, dass Inhalte die Fußzeile überlappen:Zwei Optionen:

   • Abstandshalter Element: Fügen Sie ein
   • Padding-Bottom hinzu und Box-Sizing:Verwenden Sie padding-bottom: 100px und box-sizing: border-box für #content (mit den richtigen Herstellerpräfixen).

Hinzufügen die Kopfzeile:

1. Kopfzeile im normalen Fluss: Verschachteln Sie einen Header im normalen Fluss in #content.
2. Absolut positionierter Header: Um den Header absolut zu positionieren, passen Sie den oberen Rand des #content entsprechend an.

Moderner Ansatz mit Box-Sizing:

Moderne Browser unterstützen vollständig Box-Sizing: Border-Box, wodurch Abstandselemente überflüssig werden. Die Verwendung von Abstandselementen bleibt jedoch für eine breitere Browserkompatibilität geeignet.

Fazit:

Dieser Ansatz bietet eine robuste Lösung für die Positionierung der Fußzeile am unteren Rand der Seite mit einem fester Header, der eine optimale Anzeige auf allen Geräten gewährleistet.

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