Wie halte ich die Fußzeile meiner Website am Ende der Seite fest?

So korrigieren Sie die Fußzeile am Ende der Seite

In diesem Artikel besprechen wir ein häufiges Problem, mit dem Webentwickler konfrontiert sind: das Korrigieren der Fußzeile am Ende der Seite angezeigt, unabhängig von der Bildschirmgröße. Wir werden die verschiedenen Methoden behandeln und CSS-Lösungen bereitstellen, die Ihnen dabei helfen, diesen Effekt zu erzielen.

Problemstellung

Viele Webseiten haben unterschiedliche Inhaltslängen, was dazu führen kann Die Fußzeile wird je nach Seitengröße nach oben oder unten verschoben. Dies kann zu einem inkonsistenten Erscheinungsbild auf der gesamten Website führen und es für Benutzer schwierig machen, wichtige Informationen unten auf der Seite zu finden.

CSS-Lösung

Zur Korrektur der Fußzeile Am Ende der Seite können wir die folgenden CSS-Eigenschaften verwenden:

#footer {
Position: fest;
unten: 0px;
Höhe: 50px;
Breite : 100 %;
Hintergrundfarbe: rot;
margin-bottom: 0px;
}

body {
margin-bottom: 50px;
}

Diese CSS-Regeln positionieren die Fußzeile unabhängig von ihrem Inhalt am Ende der Seite. Die Eigenschaft „position: Fixed“ entfernt die Fußzeile aus ihrem normalen Fluss im Dokument und positioniert sie relativ zum Browserfenster. Die Eigenschaft „bottom: 0px“ legt ihre Position am unteren Rand des Fensters fest und die Eigenschaft „height“ bestimmt seine Höhe.

Zusätzlich müssen wir dem Körper einen Rand unten hinzufügen, um das zu verhindern dass der Inhalt die Fußzeile überlappt. Der Wert von margin-bottom sollte der Höhe der Fußzeile entsprechen, um den richtigen Abstand sicherzustellen.

Beispielcode

Der folgende Code erstellt eine feste Fußzeile bei unten auf der Seite:

<div>
<pre class="brush:php;toolbar:false">#footer {
  position: fixed;
  bottom: 0px;
  height: 50px;
  width: 100%;
  background-color: red;
  margin-bottom: 0px;
}

body {
  margin-bottom: 50px;
}

Zusätzlich Überlegungen

• Inhaltsüberschneidungen: Wenn Sie viele Inhalte auf Ihrer Seite haben, kann es sein, dass diese die Fußzeile überlappen. Um dies zu verhindern, können Sie die „z-index“-Eigenschaft verwenden, um die Fußzeile an den Anfang der anderen Elemente auf der Webseite zu verschieben.
• Reaktionsfähigkeit: Wenn Sie möchten, dass die Fußzeile so ist Responsive: Sie können Medienabfragen verwenden, um die Höhe und Position basierend auf dem Bildschirm zu ändern Größe.

Fazit

Das Fixieren der Fußzeile am Ende der Seite ist eine einfache, aber effektive Möglichkeit, die Konsistenz und Benutzerfreundlichkeit Ihrer Website zu verbessern. Indem Sie die in diesem Artikel beschriebenen CSS-Lösungen befolgen, können Sie sicherstellen, dass Ihre Fußzeile jederzeit sichtbar bleibt, unabhängig vom Inhalt der Seite oder der Bildschirmgröße.