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.