Heim > Web-Frontend > CSS-Tutorial > Wie kann ich die Fußzeile meiner Website am Ende der Seite fixieren?

Wie kann ich die Fußzeile meiner Website am Ende der Seite fixieren?

Barbara Streisand
Freigeben: 2024-12-09 18:14:15
Original
662 Leute haben es durchsucht

How Can I Fix My Website Footer to the Bottom of the Page?

Fußzeile kann nicht am Ende der Seite fixiert werden

Wenn Sie Schwierigkeiten haben, die Fußzeile Ihrer Website am Ende der Seite zu fixieren, egal Bildschirmgröße, hier sind ein paar mögliche Lösungen:

Verwenden Sie die Position: fest; Eigenschaft.

Die Eigenschaft position: Fixed; kann verwendet werden, um ein Element an einer bestimmten Position auf dem Bildschirm zu fixieren, auch wenn die Seite gescrollt wird. Um diese Eigenschaft zu verwenden, fügen Sie den folgenden Code zu Ihrer CSS-Datei hinzu:

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

Verwenden Sie die Eigenschaft margin-top: auto;.

Die Eigenschaft margin-top: auto; kann verwendet werden, um ein Element vertikal innerhalb seines übergeordneten Containers zu zentrieren. Um diese Eigenschaft zu verwenden, fügen Sie den folgenden Code zu Ihrer CSS-Datei hinzu:

body {
  margin-top: auto;
}
Nach dem Login kopieren

Verwenden Sie eine Kombination aus position: Fixed; und margin-top: auto ;Eigenschaften.

Wenn Sie die Fußzeile am unteren Rand der Seite fixieren und vertikal zentrieren möchten, können Sie dies tun kann eine Kombination der Eigenschaften position: Fixed; und margin-top: auto; verwenden. Fügen Sie dazu den folgenden Code zu Ihrer CSS-Datei hinzu:

body {
  margin-top: auto;
}

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

Das obige ist der detaillierte Inhalt vonWie kann ich die Fußzeile meiner Website am Ende der Seite fixieren?. 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