Die Grundidee besteht darin,

zunächst die Einrichtung eines Container-Divs in der äußeren Ebene in Betracht zu ziehen, wobei die ID auf #container gesetzt ist, sodass seine Höhe der Höhe des Browserfensters entspricht, und dann das #footer-Div als untergeordnetes Div von # festzulegen. Behälter und verwenden Sie absolute Positionierung, um ihn am unteren Ende des #Behälters festzunageln, um den gewünschten Effekt zu erzielen.

Klicken Sie hier, um den Fallseiteneffekt anzuzeigen. Ändern Sie die Höhe und Breite des Browsers, um die Auswirkung des Fußzeilenteils zu sehen.

Code-Implementierung

: Betrachten Sie zunächst die HTML-Struktur. Der HTML-Code dieser Demoseite ist sehr einfach.

body,html {
Rand: 0;
Polsterung: 0;
Schriftart: 12px/1,5 Arial;
Höhe: 100 %;
}
#container {
Mindesthöhe: 100 %;
Position: relativ;
}
#Inhalt {
Polsterung: 10px;
Polsterung unten: 60px;
/* 20px(Schriftgröße)x2(Zeilenhöhe) + 10px(Padding)x2=60px*/
}
#footer {
Position: absolut;
unten: 0;
Polsterung: 10px 0;
Hintergrundfarbe: #AAA;
Breite: 100 %;
}
#footer h1 {
Schriftart: 20px/2 Arial;
Rand:0;
Polsterung:0 10px;
}
1: Stellen Sie zunächst die Höhe (Height-Attribut) der HTML- und Body-Elemente auf 100 % ein (Zeile 5). Dadurch wird zunächst sichergestellt, dass die Höhe des Root-Elements das gesamte Browserfenster ausfüllt, und dann die Höhe des #containers Füllen Sie das gesamte Browserfenster aus. Der Grund, warum die HTML- und Body-Elemente gleichzeitig festgelegt werden, liegt daran, dass Firefox und IE das Root-Element als unterschiedlich betrachten und daher hier festgelegt werden.

2: Setzen Sie dann die Höhe von #container auf 100 % (Zeile 8), aber beachten Sie, dass hier das Attribut „min-height“ anstelle des normalen Höhenattributs verwendet wird. Dies liegt daran, dass wir Folgendes berücksichtigen müssen: if # Wenn der Inhalt Wenn der Inhalt zunimmt und seine Höhe die Höhe des Browserfensters überschreitet, wird #footer immer noch am unteren Ende des Browserfensters positioniert, wenn die Höhe von #container immer noch 100 % beträgt, und deckt somit den Inhalt von #content ab. Der Zweck der Verwendung des Attributs „min-height“ besteht darin, die Höhe des #containers auf „mindestens“ die Höhe des Browserfensters zu erhöhen. Dies ist der Effekt, den wir benötigen.

Es ist jedoch zu beachten, dass in Firefox und IE7 das Attribut „min-height“ unterstützt wird, während in IE6 das Attribut „min-height“ nicht unterstützt wird. Der „Zufall“ ist jedoch, dass in IE6 das Attribut „min-height“ unterstützt wird als Höhenattribut interpretiert werden, aber der Effekt des Höhenattributs in IE6 ist der Effekt, den Min-Height ursprünglich haben sollte. Das heißt, in IE6 erhöht die Höhe des untergeordneten Divs die Höhe des übergeordneten Divs . Dies kann also genau den gewünschten Effekt in IE6, IE7 und Firefox erzielen.

3: Als nächstes setzen Sie #container auf relative Positionierung (Zeile 9), um es zur Positionierungsreferenz des darin enthaltenen #footer zu machen, dem sogenannten „zuletzt positionierten Vorfahrenelement“.

4: Setzen Sie dann #footeter auf absolute Positionierung (Zeile 17) und fügen Sie es am unteren Rand von #container ein (Zeile 18).

5: Bitte beachten Sie jedoch, dass, wenn wir #footer am Ende des #containers einfügen, dieser sich tatsächlich mit dem #content-Div oben überschneidet. Um zu vermeiden, dass der Inhalt in #content überdeckt wird, setzen wir ihn in #contetn, indem wir die Polsterung entfernen auf der unteren Seite und indem Sie den Wert von padding-bottom auf die Höhe von #footer (Zeile 13) einstellen, können Sie sicherstellen, dass der Text von #content vermieden wird. Achten Sie bei der Berechnung dieser Höhe auf die in der angegebene Berechnungsmethode Kommentare im Code (Zeile 14).