Wie erstelle ich eine Sticky Footer in CSS ohne absolute Positionierung?

So erstellen Sie eine responsive Fußzeile mit CSS

Das Beibehalten der Fußzeile am Ende der Seite ist eine häufige Webdesign-Anforderung. Allerdings stoßen einige Benutzer auf Schwierigkeiten bei der Verwendung der Positionierungseigenschaft „absolut“. Dieser Artikel führt Sie durch die richtige CSS-Implementierung, um einen Sticky-Footer-Effekt zu erzielen, ohne Ihr Layout zu stören.

Hintergrund des Problems

Benutzer, die erfolglos versuchten, die Position ihrer Fußzeile zu korrigieren, haben normalerweise den folgenden Code angewendet:

position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;

Vorgeschlagene Lösung

Um das Problem ohne die Verwendung von Plugins oder zusätzlichen HTML-Elementen zu beheben, befolgen Sie diese Schritte Schritte:

1. Fügen Sie die folgenden CSS-Regeln zu Ihrem Stylesheet hinzu:

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
#bottom-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

2. Stellen Sie sicher, dass die in „body {margin}“ angegebene Höhe mit der tatsächlichen übereinstimmt Höhe des Fußzeilenelements (z. B. 100 Pixel).

Hinweis: Es wird empfohlen, die HTML-Element-ID zu verwenden „#bottom-footer“ für die Ausrichtung anstelle von „footer #bottom-footer“, da letzteres möglicherweise mit Ihrem ursprünglichen CSS-Stil in Konflikt steht.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Sticky Footer in CSS ohne absolute Positionierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!