Wie kann ich meine Fußzeile unabhängig von der Inhaltshöhe am Ende der Seite fixieren?

Fußzeile am Ende der Seite fixieren

Bei Ihrem Versuch, die Fußzeile am Ende Ihrer Webseite festzuhalten, haben Sie verschiedenes ausprobiert Methoden wie „bottom:0px“ und „position:absolute“ ohne zufriedenstellende Ergebnisse. Hier ist eine Lösung, um sicherzustellen, dass Ihre Fußzeile unabhängig von der Bildschirmgröße am unteren Rand der Seite bleibt:

1. Fußzeilen-CSS ändern:

#footer {
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0;
    height: [desired height of footer, e.g., 50px];
    margin-bottom: 0;
}

2. Rand zum Körper hinzufügen:

Um das zu verhindern Damit sich die Fußzeile nicht mit dem Seiteninhalt überschneidet, fügen Sie einen Rand zum Hauptteil hinzu:

body {
    margin-bottom: [same height as footer, e.g., 50px];
}

Dadurch wird sichergestellt, dass die Seite auch mit der festen Fußzeile scrollbar bleibt. Passen Sie die Höhenwerte im CSS-Code an Ihre Anforderungen an.

Beispielcode:

<div>

#footer {
  background-color: red;
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 50px;
  margin-bottom: 0px;
}

body {
  margin-bottom: 50px;
}

Dieser Code fixiert die Fußzeile am unteren Rand des Seite, um sicherzustellen, dass sie auch bei begrenztem Inhalt sichtbar ist.

Das obige ist der detaillierte Inhalt vonWie kann ich meine Fußzeile unabhängig von der Inhaltshöhe am Ende der Seite fixieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!