Wie sorgt man mit CSS dafür, dass die Fußzeile unten bleibt?

Fußzeilenpositionierung mit CSS beherrschen: Am unteren Rand bleiben

Stellen Sie beim Erstellen von Webseiten sicher, dass die Fußzeile am unteren Rand verankert bleibt Browser stellt eine häufige Herausforderung dar. Lassen Sie uns in die Lösung eintauchen, uns mit Ihrem spezifischen Code befassen und die Techniken erkunden, die Ihnen helfen können, dieses Dilemma zu überwinden.

Ein Ansatz, der oft zu kurz kommt, besteht darin, die Position der Fußzeile auf relativ zu setzen. Diese relative Positionierung allein reicht nicht aus, um die Fußzeile unten festzuhalten.

Versuchen Sie es stattdessen mit der absoluten Positionierung. So geht's:

<code class="CSS">#Footer {
    position: absolute;
    width: 100%;
    bottom: 0px;
}</code>

Indem Sie die Position auf „absolut“ setzen, lösen Sie die Fußzeile vom normalen Fluss des Dokuments. Die Breite von 100 % stellt sicher, dass sie sich über die gesamte Breite des Browsers erstreckt, während die auf 0 gesetzte Eigenschaft „Bottom“ sie ganz unten verankert.

Alternativ können Sie eine feste Positionierung verwenden, die der absoluten Positionierung ähnelt Positionierung, aber das Element bleibt an Ort und Stelle, auch wenn der Benutzer auf der Seite scrollt. Die feste Positionierung ist jedoch möglicherweise nicht mit allen Browsern kompatibel, insbesondere mit Internet Explorer.

Ändern Sie in Ihrem spezifischen Code den Fußzeilenstil wie folgt:

<code class="CSS">#Footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: #004669;
    font-family: Tahoma, Arial;
    font-size: 0.7em;
    color: White;
    height: 4em;
}</code>

Durch Anwenden dieser Änderung sollten Sie Folgendes tun haben jetzt eine Fußzeile, die unabhängig von der Inhaltslänge der Seite fest am unteren Rand des Browsers verankert bleibt.

Das obige ist der detaillierte Inhalt vonWie sorgt man mit CSS dafür, dass die Fußzeile unten bleibt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!