wie man eine reaktionsschnelle Fußzeile mit CSS

erstellt, die die Fußzeile am Ende der Seite aufrechterhalten, ist eine allgemeine Webdesignanforderung. Einige Benutzer begegnen jedoch Schwierigkeiten, die die "absolute" Positionierungseigenschaft verwenden. Dieser Artikel führt Sie durch die richtige CSS -Implementierung, um einen klebrigen Fußzeileneffekt zu erzielen, ohne Ihr Layout zu stören.

Ausgabehintergrund

Benutzer, die versuchen, ihre Fußzeigerposition erfolglos zu beheben, haben den folgenden Code in der Regel angewendet:

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

Proposed Solution

To resolve the issue without using plugins or additional HTML elements, follow these steps:

1. Add the following CSS rules to your stylesheet:

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 Höhe des Fußzeilenelements (z. B. 100px) übereinstimmt. Styling.