Heim > Web-Frontend > CSS-Tutorial > Wie befestige ich eine Fußzeile am Ende einer Webseite?

Wie befestige ich eine Fußzeile am Ende einer Webseite?

DDD
Freigeben: 2024-12-16 10:55:17
Original
972 Leute haben es durchsucht

How to Fix a Footer to the Bottom of a Web Page?

So befestigen Sie die Fußzeile am Ende der Seite

Viele Websites haben das Problem, dass eine Fußzeile nicht am Ende der Seite befestigt ist Seite, insbesondere auf Seiten mit wenig Inhalt. Um sicherzustellen, dass die Fußzeile unabhängig von der Bildschirmgröße oder Inhaltslänge am unteren Rand der Seite bleibt, finden Sie hier eine CSS-Lösung:

#footer {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">position: fixed;
height: 50px;
background-color: red;
bottom: 0px;
left: 0px;
right: 0px;
margin-bottom: 0px;
Nach dem Login kopieren

}

Dieser Code weist dem die folgenden Eigenschaften zu Fußzeile:

  • Position: Setzt die Positionierung der Fußzeile auf „Fest“, um sicherzustellen, dass sie unabhängig von der Scrollposition der Seite an Ort und Stelle bleibt.
  • Höhe: Gibt die Höhe der Fußzeile an.
  • Hintergrundfarbe: Passt die Hintergrundfarbe der Fußzeile zu Demonstrationszwecken an.
  • unten: Positioniert den unteren Rand der Fußzeile 0 Pixel vom unteren Rand der Seite.
  • links: Richtet den linken Rand der Fußzeile am linken Rand des aus Seite.
  • rechts: Richtet den rechten Rand der Fußzeile am rechten Rand der Seite aus.
  • margin-bottom: Entfernt alle unerwünschten Elemente Unterer Rand.

Um sicherzustellen, dass der Inhalt die feste Fußzeile nicht überlappt, kann eine zusätzliche CSS-Regel auf die angewendet werden body-Element:

body {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">margin-bottom: 50px;
Nach dem Login kopieren

}

Dadurch wird dem Körper ein unterer Rand von 50 Pixeln hinzugefügt , wodurch Platz für die Anzeige der festen Fußzeile geschaffen wird.

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

Quelle:php.cn
Vorheriger Artikel:Wie kann ich Elemente mit CSS in verschiedenen Browsern formatieren? Nächster Artikel:Wie verhindert man die Erweiterung der Spaltenbreite in HTML-Tabellen?
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
Aktuelle Ausgaben
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage