Wie kann ich mithilfe von HTML und CSS eine Fußzeile am Ende einer Webseite befestigen?

Fußzeile mit HTML und CSS am Ende der Seite fixieren

Die Anforderung der Frage besteht darin, die Fußzeile einer Webseite am Ende zu fixieren Unten auf der Seite, unabhängig von der Bildschirmgröße.

Um dieses Problem zu lösen, verwenden wir die Position: Fixed-Eigenschaft in CSS. Diese Eigenschaft ermöglicht die Positionierung eines Elements relativ zum Ansichtsfenster und nicht zum Fluss des Dokuments. Wir werden auch die Eigenschaft „bottom“ auf 0px setzen, um die Fußzeile am unteren Rand der Seite zu positionieren.

Zusätzlich müssen wir die Höhe der Fußzeile festlegen, damit sie nicht das gesamte Ansichtsfenster einnimmt . In diesem Beispiel legen wir die Höhe auf 50 Pixel fest.

Hier sind die aktualisierten CSS-Stile für die Fußzeile:

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

Um sicherzustellen, dass der Inhalt über der Fußzeile diese nicht überlappt , müssen wir etwas Platz unter dem Hauptinhalt hinzufügen. Dies kann erreicht werden, indem die Eigenschaft „margin-bottom“ des Body-Elements auf einen Wert festgelegt wird, der größer oder gleich der Höhe der Fußzeile ist. In diesem Beispiel setzen wir den unteren Rand auf 50 Pixel.

Hier sind die aktualisierten CSS-Stile für den Textkörper:

body {
    margin-bottom: 50px;
}

Mit diesen Änderungen wird die Fußzeile nun auf festgelegt am unteren Rand der Seite, unabhängig von der Bildschirmgröße.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von HTML und CSS eine Fußzeile am Ende einer Webseite befestigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!