Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Patricia Arquette
Freigeben: 2024-11-01 07:55:02
Original
268 Leute haben es durchsucht

How to Make Your Footer Stick to the Bottom with CSS?

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

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