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

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>
<pre class="brush:php;toolbar:false">position: fixed;
height: 50px;
background-color: red;
bottom: 0px;
left: 0px;
right: 0px;
margin-bottom: 0px;

}

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>
<pre class="brush:php;toolbar:false">margin-bottom: 50px;

}

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!