Als Front-End-Webentwickler sind Sie beim Erstellen von Seiteneffekten sicher schon auf das folgende Phänomen gestoßen: Wenn eine HTML-Seite weniger Inhalt enthält, schwebt der „Fußzeilen“-Teil der Webseite nach oben und befindet sich in der Mitte der Seite, was sich stark auf den visuellen Effekt auswirkt und Ihre Seite sehr hässlich aussehen lässt. Besonders jetzt, wo es immer mehr Breitbildschirme gibt, tritt dieses Phänomen noch häufiger auf. Wie also fixieren Sie den „Fußzeilen“-Teil einer Webseite dauerhaft am unteren Seitenrand? Bitte beachten Sie, dass hier gesagt wird, dass der Fußbereich immer am unteren Ende der Seite und nicht immer am unteren Ende des Anzeigebildschirms fixiert ist. Mit anderen Worten: Wenn nur wenig Inhalt vorhanden ist, wird die Webseite am unteren Ende des Browsers angezeigt. Wenn die Inhaltshöhe die Browserhöhe überschreitet, befindet sich der Fußbereich der Webseite am unteren Ende der Seite. Kurz gesagt: Der Fußbereich der Webseite befindet sich immer am unteren Ende der Seite. Mit anderen Worten: Der Fußbereich sinkt immer nach unten. Wie in der folgenden Abbildung dargestellt: Code kopieren Der Code lautet wie folgt:<div id="Behälter"> <div id="header">Header-Abschnitt</div> <div id="Seite" Klasse="Clearfix"> Seiteninhalt </div> <div id="footer">Fußzeilenbereich</div> </div> Tatsächlich können wir die erforderliche Inhaltsstruktur in div#page wie folgt hinzufügen: Code kopieren Der Code lautet wie folgt:<div id="Behälter"> <div id="header">Header-Abschnitt</div> <div id="Seite" Klasse="Clearfix"> <div id="left">Linke Seitenleiste</div> <div id="content">Hauptinhalt</div> <div id="right">Rechte Seitenleiste</div> </div> <div id="footer">Fußzeilenbereich</div> </div> Um den Fußbereich immer am unteren Seitenrand zu fixieren, benötigen wir eigentlich nur vier Divs, wobei div#container ein Container ist. In diesen Container schließen wir div#header (Header), div#page (Seitentext, wir können diesem Div weitere Div-Strukturen hinzufügen, wie im obigen Code gezeigt), div#footer (Fußbereich) ein. CSS Code Code kopieren Der Code lautet wie folgt:html, Text { Rand: 0; Polsterung: 0; Höhe: 100%; } #Behälter { Mindesthöhe: 100 %; Höhe: auto !wichtig; Höhe: 100 %; /*IE6 erkennt Mindesthöhe nicht*/ Position: relativ; } #Kopfzeile { Hintergrund: #ff0; Polsterung: 10px; } #Seite { Breite: 960px; Rand: 0 automatisch; padding-bottom: 60px;/*entspricht der Höhe des Fußbereichs*/ } #Fußzeile { Position: absolut; unten: 0; Breite: 100 %; Höhe: 60px;/*Fußhöhe*/ Hintergrund: #6cf; klar: beides; } /*=======Hauptinhalt=======*/ #links { Breite: 220px; schweben: links; Rand rechts: 20px; Hintergrund: Limette; } #Inhalt { Hintergrund: orange; schweben: links; Breite: 480px; Rand rechts: 20px; } #Rechts{ Hintergrund: grün; schweben: rechts; Breite: 220px; } Schauen wir uns das Implementierungsprinzip dieser Methode an : 1. <html>- und <body>-Tags: Die Höhe der HTML- und Body-Tags muss auf „100 %“ eingestellt werden, damit wir die prozentuale Höhe des Containers festlegen können. Gleichzeitig müssen die Ränder und Auffüllungen von HTML und Body entfernt werden, d. h. die Ränder und Auffüllungen von HTML und Body sind alle 0; 2.div#container-Container: Der div#container-Container muss eine Mindesthöhe (Min-Height) von 100 % festlegen. Dies dient hauptsächlich dazu, dass er 100 % Höhe beibehalten kann, wenn wenig (oder kein) Inhalt vorhanden ist. Min-Height wird jedoch in IE6 nicht unterstützt. Um mit IE6 kompatibel zu sein, müssen wir daher einige Kompatibilitätsverarbeitungen für Min-Height durchführen. Weitere Informationen finden Sie im vorherigen Code. Sie können auch Min-Height Fast Hack lesen, um zu erfahren, wie Sie das Bugproblem von Min-Height in IE6 lösen können. Darüber hinaus müssen wir auch eine „position:relative“ im div#container-Container festlegen, damit die darin enthaltenen Elemente nach der absoluten Positionierung nicht aus dem div#container-Container weglaufen. 3.div#page-Container: Es gibt eine wichtige Einstellung für den div#page-Container. Sie müssen für diesen Container einen padding-bottom-Wert festlegen, und dieser Wert muss gleich (oder etwas größer) der Höhe des Footer-div#footer sein. Natürlich können Sie border-bottom und border-width verwenden, um padding-bottom in div#page zu ersetzen, aber es gibt eine Sache, auf die Sie achten müssen. Sie dürfen hier nicht margin-bottom verwenden, um padding-bottom zu ersetzen, da sonst der Effekt nicht erreicht wird. 4.div#footer-Container: Der div#footer-Container muss auf eine feste Höhe eingestellt werden, die Einheit kann px (oder em) sein. div#footer muss außerdem absolut positioniert und auf bottom:0 gesetzt werden; dadurch wird div#footer am unteren Rand des div#container-Containers fixiert. Dadurch wird der zuvor erwähnte Effekt erzielt: Wenn nur wenig Inhalt vorhanden ist, wird div#footer am unteren Rand des Bildschirms fixiert (weil div#container eine Mindesthöhe von 100 % festlegt). Wenn die Inhaltshöhe die Bildschirmhöhe überschreitet, wird div#footer auch am unteren Rand von div#container fixiert, also am unteren Rand der Seite. Sie können auch eine „width:100%“ zu div#footer hinzufügen, um es über die gesamte Seite auszudehnen. 5. Andere Divs: Was andere Container betrifft, können Sie sie entsprechend Ihren Anforderungen festlegen, z. B. den vorherigen Div#header, Div#left, Div#content, Div#right usw. Vorteil : Der Aufbau ist einfach und übersichtlich. Es sind weder js noch irgendwelche Hacks nötig, um die Kompatibilität mit allen Browsern zu erreichen und es ist auch für das iPhone geeignet. Manko : Der Nachteil besteht darin, dass Sie für den div#footer-Container eine feste Höhe festlegen müssen. Diese Höhe können Sie nach Bedarf festlegen. Die Einheit kann px oder em sein. Darüber hinaus müssen Sie die padding-bottom (oder border-bottom-width) des div#page-Containers so festlegen, dass sie gleich (oder etwas größer) der Höhe von div#footer entspricht, damit sie ordnungsgemäß ausgeführt wird. Oben hat Matthew James Taylor erklärt, wie man die Fußzeile immer am unteren Seitenrand fixiert. Wenn Sie interessiert sind, können Sie den Originaltext lesen oder hier klicken, um die Demo anzuzeigen. Methode 2 : Diese Methode verwendet den negativen Wert des oberen Rands der Fußzeile, um den Effekt zu erzielen, dass die Fußzeile immer am unteren Seitenrand fixiert ist. Sehen wir uns im Detail an, wie dies erreicht wird. HTML-Markup Code kopieren Der Code lautet wie folgt:<div id="Behälter"> <div id="page">Hauptinhalt</div> </div> <div id="footer">Fußzeile</div> Der obige Code ist der einfachste HTML-Code. Sie können auch feststellen, dass div#footer und div#container Geschwister sind, im Gegensatz zu Methode 1, wo div#footer innerhalb von div#container liegt. Natürlich können Sie dem div#container-Container auch Inhalte entsprechend Ihren Anforderungen hinzufügen, beispielsweise ein dreispaltiges Layout mit einem Kopfteil, siehe den folgenden Code: Code kopieren Der Code lautet wie folgt:<div id="Behälter"> <div id="header">Header-Abschnitt</div> <div id="Seite" Klasse="Clearfix"> <div id="left">Linke Seitenleiste</div> <div id="content">Hauptinhalt</div> <div id="right">Rechte Seitenleiste</div> </div> </div> <div id="footer">Fußzeilenbereich</div> CSS Code Code kopieren Der Code lautet wie folgt:html, Körper { Höhe: 100%; Rand: 0; Polsterung: 0; } #Behälter { Mindesthöhe: 100 %; Höhe: auto !wichtig; Höhe: 100%; } #Seite { padding-bottom: 60px;/*Die Höhe entspricht der Höhe des Fußbereichs*/ } #Fußzeile { Position: relativ; margin-top: -60px;/*entspricht der Höhe des Fußbereichs*/ Höhe: 60px; klar: beides; Hintergrund: #c6f; } /*===========Andere Divs============*/ #Kopfzeile { Polsterung: 10px; Hintergrund: Limette; } #links { Breite: 18%; schweben: links; Rand rechts: 2 %; Hintergrund: orange; } #Inhalt{ Breite: 60%; schweben: links; Rand rechts: 2 %; Hintergrund: grün; } #Rechts { Breite: 18%; schweben: links; Hintergrund: gelb; } Es gibt mehrere Punkte, die bei Methode 1 und Methode 2 genau gleich sind. Beispielsweise sind die Punkte 1-3 in Methode 1 in Methode 2 gleich. Mit anderen Worten muss bei Methode 2 auch die Höhe von HTML und Body auf 100 % gesetzt und Rand und Polsterung auf 0 zurückgesetzt werden. Zweitens muss auch für div#container die Mindesthöhe auf 100 % gesetzt werden und das Kompatibilitätsproblem mit der Mindesthöhe unter IE6 behandelt werden. Drittens ist es auch notwendig, einen Wert für padding-bottom oder border-bottom-width im div#page-Container festzulegen, der der Höhe von div#footer entspricht (oder etwas größer ist). Der Unterschied zwischen den beiden Methoden ist : 1.div#footer wird außerhalb des div#containers platziert, was bedeutet, dass die beiden auf derselben Ebene liegen. Wenn Sie ein neues Element auf derselben Ebene wie den div#container platzieren müssen, müssen Sie dieses Element absolut positionieren, da es sonst den Mindesthöhenwert des div#containers zerstört. 2. Legen Sie für den oberen Rand von div#footer einen negativen Wert fest. Dieser Wert entspricht der Höhe von div#footer und muss außerdem dem Wert für padding-bottom (oder border-bottom-width) des div#page-Containers entsprechen. Vorteil: Die Struktur ist einfach und klar und es kann ohne JS und Hacks Kompatibilität mit allen Browsern erreicht werden. Mangel: Für den Fußbereich muss ein fester Wert eingestellt werden, daher ist es nicht möglich, den Fußbereich an die Höhe anzupassen. Wenn Sie an dieser Methode interessiert sind, können Sie auch „CSS Sticky Footer“ und „Pure Css Sticky Footer“ durchsuchen oder direkt auf Demo klicken, um den Quellcode anzuzeigen. Methode 3 : Es gibt viele Möglichkeiten, die Fußzeile immer am unteren Ende der Seite zu fixieren, aber viele davon erfordern den Einsatz einiger Hacks oder die Hilfe von JavaScript. Die als nächstes zu besprechende Methode drei verwendet nur 15 Zeilen Stilcode und eine einfache und klare HTML-Struktur, um den Effekt zu erzielen, und weist eine starke Kompatibilität auf. Schauen wir uns zunächst den Code an, ohne etwas anderes zu sagen. HTML Code Code kopieren Der Code lautet wie folgt:<div id="Behälter"> <div id="page">Ihr Website-Inhalt hier.</div> <div class="push"><!-- hat keinen Inhalt --></div> </div> <div id="footer">Fußzeilenbereich</div> Das Obige ist die grundlegendste HTML-Auszeichnung. Sie können auch neue Inhalte hinzufügen. Beachten Sie jedoch, dass die neu hinzugefügten Elemente absolut positioniert werden müssen, wenn Sie Inhalte außerhalb der Container div#container und div#footer hinzufügen. Sie können beispielsweise die Elemente, die Sie auf Ihrer Seite benötigen, zum div#container hinzufügen. HTML Code Code kopieren Der Code lautet wie folgt:<div id="Behälter"> <div id="header">Header-Abschnitt</div> <div id="Seite" Klasse="Clearfix"> <div id="left">Linke Seitenleiste</div> <div id="content">Hauptinhalt</div> <div id="right">Richtiger Inhalt</div> </div> <div class="push"><!-- hier nichts einfügen --></div> </div> <div id="footer">Fußzeilenbereich</div> CSS Code Code kopieren Der Code lautet wie folgt:html, Körper{ Höhe: 100%; Rand: 0; Polsterung: 0; } #Behälter { Mindesthöhe: 100 %; Höhe: auto !wichtig; Höhe: 100%; margin: 0 auto -60px;/*Der negative Wert von margin-bottom entspricht der Fußzeilenhöhe*/ } .drücken, #Fußzeile { Höhe: 60px; klar: beides; } /*==========Andere Div-Effekte==========*/ #Kopfzeile { Polsterung: 10px; Hintergrund: Limette; } #links { Breite: 18%; schweben: links; Rand rechts: 2 %; Hintergrund: orange; } #Inhalt{ Breite: 60%; schweben: links; Rand rechts: 2 %; Hintergrund: grün; } #Rechts { Breite: 18%; schweben: links; Hintergrund: gelb; } #Fußzeile { Hintergrund: #f6c; } Verglichen mit den beiden vorherigen Methoden ist Methode drei Methode zwei ähnlicher. Beide platzieren div#footer außerhalb des div#containers, und diese Methode fügt ein div.push im div#container hinzu, um div#footer nach unten zu drücken. Schauen wir uns an, wie diese Methode erreichen kann, dass der Footer immer am unteren Ende der Seite fixiert ist. 1. <html>- und <body>-Tags: Die HTML- und Body-Tags sind dieselben wie bei den beiden vorherigen Methoden. Sie müssen „height:100%“ festlegen und „margin“ und „padding“ auf 0 zurücksetzen. 2.div#container: Der Schlüsselteil von Methode drei liegt in der Einstellung von div#container. Zuerst müssen Sie seine Mindesthöhe (Min-Height) auf 100 % einstellen. Um mit IE6 kompatibel zu sein, muss die Mindesthöhe kompatibel sein (siehe vorheriger Code für spezifische Verarbeitungsmethoden). Darüber hinaus gibt es hier noch einen weiteren wichtigen Punkt. Sie müssen einen unteren Rand für den div#container-Container festlegen und ihm einen negativen Wert zuweisen. Der Wert entspricht der Höhe von div#footer und div.push. Wenn für div#footer und div.push Füll- und Rahmenwerte festgelegt sind, muss der negative Wert des unteren Rands von div#container zu den Füll- und Rahmenwerten von div#footer und div.push addiert werden. Das heißt: „div#container{margin-bottom:-[div#footer's height+padding+border] oder -[div.push's height+padding+border]}“. Kurz gesagt: Der negative Wert des unteren Rands von div#container muss mit der Höhe von div#footer und div.push übereinstimmen (wenn eine Polsterung oder ein Rahmen vorhanden ist, muss der Höhenwert hinzugefügt werden). 3.div.push: Wir sollten keinen Inhalt in div.push einfügen, und dieses div muss im Container div#container und unten platziert werden, und sein Höhenwert muss gleich dem Wert von div#footer eingestellt werden. Am besten fügen Sie clear:both hinzu, um das Floating zu löschen. Die Rolle des div.push-Containers besteht hier darin, den Fußbereich nach unten zu drücken. 4.div#footer-Container: Der div#footer-Container ist derselbe wie bei Methode 2. Er kann nicht innerhalb des div#-Containers platziert werden, befindet sich aber auf derselben Ebene wie der div#-Container. Wenn Sie den Abstand zwischen dem Element und dem Footer festlegen müssen, verwenden Sie am besten „Padding“ anstelle des Randwerts. Vorteil: Einfach und übersichtlich, leicht verständlich und mit allen Browsern kompatibel. Mangel: Im Vergleich zu den beiden vorherigen Methoden verwendet diese Methode einen zusätzlichen div.push-Container. Diese Methode begrenzt auch die Höhe des Fußzeilenteils und kann den adaptiven Höheneffekt nicht erzielen. Wenn Sie mehr über Methode 3 erfahren möchten, können Sie hier klicken oder den Code direkt aus der DEMO herunterladen und selbst studieren. Methode 4 : Bei den ersten drei Methoden benötigen wir keine Hilfe von JavaScript oder jQuery, wodurch wir den Effekt erzielen können, dass der Fußbereich immer am unteren Ende der Seite fixiert ist. Obwohl die ersten drei Methoden nicht die Hilfe von jQuery verwenden, haben wir zusätzliche HTML-Tags hinzugefügt, um den Effekt zu erzielen. Wenn Sie diese HTML-Tags weglassen, wird es schwierig, den Effekt zu erzielen. In diesem Fall ist die Verwendung von jQuery oder JavaScript eine gute Möglichkeit, dies zu erreichen. Schauen wir uns die vierte Methode an, die jQuery verwendet, um den Effekt zu erzielen, dass die Fußzeile immer am unteren Ende der Seite fixiert wird. HTML-Markup Code kopieren Der Code lautet wie folgt:<div id="header">Header-Abschnitt</div> <div id="Seite" Klasse="Clearfix"> <div id="left">Linke Seitenleiste</div> <div id="content">Hauptinhalt</div> <div id="right">Richtiger Inhalt</div> </div> <div id="footer">Fußzeilenbereich</div> Wir haben hier keine unnötigen HTML-Tags hinzugefügt. Sie können dem Text auch jederzeit Inhalt hinzufügen. Stellen Sie einfach sicher, dass div#footer am Ende des Texts steht. Code kopieren Der Code lautet wie folgt:<div id="footer">Fußzeilenbereich</div> CSS Code Code kopieren Der Code lautet wie folgt:*{Rand: 0;Padding:0;} .clearfix:vorher, .clearfix:nach { Inhalt:""; Anzeige:Tabelle; } .clearfix:nach { klar: beides; } .klarfix { Zoom:1; /* IE <8 */ } #Fußzeile{ Höhe: 60px; Hintergrund: #fc6; Breite: 100 %; } /*===========Andere Divs============*/ #Kopfzeile { Polsterung: 10px; Hintergrund: Limette; } #links { Breite: 18%; schweben: links; Rand rechts: 2 %; Hintergrund: orange; } #Inhalt{ Breite: 60%; schweben: links; Rand rechts: 2 %; Hintergrund: grün; } #Rechts { Breite: 18%; schweben: links; Hintergrund: gelb; } Diese Methode ist nicht auf CSS angewiesen, um den Effekt wie die vorherigen drei Methoden zu erzielen. Hier müssen Sie den Stil nur gemäß den normalen Stilanforderungen schreiben. Sie müssen jedoch besonders darauf achten, dass Sie die Höhe in HTML und Body nicht auf 100 % einstellen können, da diese Methode sonst nicht richtig funktioniert. Wenn Sie eine Höhe in div#footer und die Breite auf 100 % einstellen, ist es kinderleicht. jQuery-Code Code kopieren Der Code lautet wie folgt:<Skripttyp="text/javascript"> // Fensterladeereignis wird nur verwendet, wenn die Fensterhöhe von Bildern abhängig ist $(window).bind("laden", function() { var Fußzeilenhöhe = 0, Fußzeile oben = 0, $footer = $("#footer"); positionFooter(); //Position der Footer-Funktion definieren Funktion positionFooter() { //Höhe des div#footer ermitteln Fußzeilenhöhe = $footer.height(); //Der Abstand zwischen div#footer und dem oberen Bildschirmrand Fußzeilenoberseite = ($(window).scrollTop()+$(window).height()-Fußzeilenhöhe)+"px"; /* DEBUGGING-SACHEN console.log("Dokumenthöhe: ", $(document.body).height()); console.log("Fensterhöhe: ", $(window).height()); console.log("Fenster scrollen: ", $(window).scrollTop()); console.log("Fußzeilenhöhe: ", footerHeight); console.log("Fußzeile oben: ", footerTop); console.log("------------") */ //Wenn die Höhe des Seiteninhalts kleiner als die Bildschirmhöhe ist, wird div#footer absolut am unteren Bildschirmrand positioniert, andernfalls behält div#footer seine normale statische Positionierung bei. wenn ( ($(document.body).height()+footerHeight) < $(window).height()) { $footer.css({ Position: "absolut" }).stopp().animieren({ nach oben: FußzeileNach oben }); } anders { $footer.css({ Position: "statisch" }); } } $(window).scroll(positionFooter).resize(positionFooter); }); </Skript> Mit dem obigen jQuery-Code können wir ganz einfach erreichen, dass der Footer immer am unteren Ende der Seite fixiert ist. Bei der Verwendung dieser Methode gibt es einige Dinge zu beachten. 1. Stellen Sie sicher, dass die jQuery-Versionsbibliothek normal importiert und der obige jQuery-Code normal aufgerufen wird. 2. Stellen Sie sicher, dass <div id="footer"> das letzte im Text ist. 3. Stellen Sie sicher, dass die Höhe im HTML-Text nicht auf 100 % eingestellt ist. Vorteil: Die Struktur ist einfach, es sind keine unnötigen Tags erforderlich, es ist mit allen Browsern kompatibel und es müssen keine speziellen Stile geschrieben werden. Der Fußbereich muss keine feste Höhe haben. Mangel: Es kann in Browsern, die JS nicht unterstützen, nicht normal angezeigt werden und blinkt jedes Mal, wenn die Browsergröße geändert wird. Heute haben wir hauptsächlich vier Methoden besprochen und gelernt, um den Fußbereich einer Webseite immer am unteren Seitenrand zu fixieren. Dabei sollte klargestellt werden, dass der Fußbereich immer am unteren Seitenrand fixiert ist, nicht am unteren Rand des Browserfensters. Mit anderen Worten: Wenn der Hauptinhalt der Seite nicht so hoch ist wie der Anzeigebildschirm, wird der Fußbereich am unteren Bildschirmrand fixiert. Wenn der Seiteninhalt jedoch die Höhe des Anzeigebildschirms überschreitet, sinkt der Fußbereich mit dem Inhalt, bleibt aber immer am unteren Seitenrand fixiert. Die ersten drei sind reine CSS-Implementierungen und die letzte wird mit jQuery implementiert. Jede der vier Methoden hat ihre eigenen Vor- und Nachteile. Sie können je nach Bedarf entscheiden, wann Sie sie verwenden. Ich hoffe, dieser Artikel kann allen etwas helfen. Wenn Sie eine bessere Methode haben, hoffe ich, dass Sie sie mit mir teilen können. Wenn Sie möchten, können Sie mir direkt eine Nachricht hinterlassen. Ich werde immer bei Ihnen sein, um dieses Wissen gemeinsam zu lernen und zu diskutieren. |
<<: Detaillierte Erläuterung der grundlegenden Verwendung von Apache POI
>>: HTML verwendet das Titelattribut, um Text anzuzeigen, wenn die Maus darüber schwebt
Nachdem ich das letzte Mal die Taobao-Detailseite ...
Inhaltsverzeichnis Warum wird addEventListener be...
Problembeschreibung: Der Inhalt der Datei 11 laut...
Vorwort Zuvor habe ich über das Problem der verti...
Firefox, Opera und andere Browser unterstützen Web...
Hintergrund In letzter Zeit werde ich in Intervie...
In den letzten Jahren war DIV+CSS bei der Website-...
1. Zweck Schreiben Sie lokal eine Flask-Anwendung...
Die erste Zeile eines Docker-Images beginnt mit e...
1. Herunterladen https://dev.mysql.com/downloads/...
Notieren Sie den Fehler, der mich heute den ganze...
Einführung in temporäre Tabellen Was ist eine tem...
In diesem Artikel erfahren Sie, wie Sie MySQL 8.0...
Der Redakteur wollte vor Kurzem mit dem macOS-Sys...
In diesem Artikel finden Sie den spezifischen Cod...