Heim > Web-Frontend > CSS-Tutorial > Wie behalte ich eine Fußzeile am Ende der Seite, auch wenn ich scrolle?

Wie behalte ich eine Fußzeile am Ende der Seite, auch wenn ich scrolle?

Linda Hamilton
Freigeben: 2024-12-15 14:41:14
Original
522 Leute haben es durchsucht

How to Keep a Footer at the Bottom of the Page Even When Scrolling?

Div mit überlaufenden Bildlaufleisten am unteren Rand des Inhalts positionieren

Wenn der Seiteninhalt über das Ansichtsfenster hinausgeht, stoßen Entwickler häufig auf das Problem, dass Fußzeilen über dem angezeigt werden unteren Rand der Seite. Um dieses Verhalten zu beheben, betrachten Sie die im bereitgestellten Bild beschriebene Implementierung.

Das ursprünglich verwendete CSS-Snippet mit position: absolute und unten: 30px positioniert das Div am unteren Rand des Ansichtsfensters. Beim Scrollen bleibt das Div jedoch stationär und löst sich von der unteren Grenze des Inhalts.

Lösung

Der optimale Ansatz zur dauerhaften Verankerung des Div am unteren Rand des Inhalts erfordert der Einsatz einer festen Positionierung. Hier ist das überarbeitete CSS:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}
Nach dem Login kopieren

Diese Modifikation erzielt den gewünschten Effekt. Das Div bleibt am Ende des gesamten Inhalts fixiert, unabhängig vom Scrollen. Die bereitgestellte Geige demonstriert dieses Verhalten: http://jsfiddle.net/uw8f9/.

Das obige ist der detaillierte Inhalt vonWie behalte ich eine Fußzeile am Ende der Seite, auch wenn ich scrolle?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage