Detaillierte Erläuterung von drei Lösungen für den Website-Footer-Sinking-Effekt
|
Hintergrund Viele Website-Designs bestehen im Allgemeinen aus zwei Teilen: Inhalt + Fußzeile. Der Inhalt enthält den Hauptinhalt der Website und die Fußzeile zeigt die Registrierungsinformationen der Website usw. an. Aufgrund der Unsicherheit hinsichtlich der Inhaltshöhe der Website können die folgenden zwei Situationen auftreten: 1. Bei weniger Inhalt wird der Footer am unteren Seitenrand fixiert. Wie unten dargestellt:
2. Bei langen Inhalten wird die Fußzeile hinter den Inhalt verschoben, wie in der roten Box in der folgenden Abbildung dargestellt:
Diese Anforderung ist auf der PC-Seite immer noch weit verbreitet. Ich bin auch in meiner eigenen Anwendung auf dieses Problem gestoßen. Heute habe ich mehrere Methoden zusammengefasst, um dieses Layout zu erreichen. Methode 1: Verwenden Sie js zur Berechnung Warum habe ich zuerst die JS-Steuerung verwendet? Ehrlich gesagt habe ich, als ich zum ersten Mal auf dieses Problem stieß, direkt JS verwendet, um es zu lösen (hauptsächlich, weil ich wusste, dass JS es definitiv erreichen konnte, also habe ich keine Zeit damit verbracht, über andere Methoden nachzudenken). Die Grundidee ist: Nachdem die Seite geladen wurde, berechnen Sie die Bildschirmhöhe - die tatsächliche Höhe des Inhalts. Wenn der Unterschied größer ist als Um die Höhe der Fußzeile zu bestimmen, fügen Sie dem Fußzeilenstil eine feste Position hinzu, um sie am unteren Bildschirmrand zu fixieren. Der Democode lautet wie folgt:
<!DOCTYPE html>
<html>
<Kopf>
<title>Fußzeilen-Bodeneffekt</title>
<style type="text/css">
div {
Rand: 0,
Polsterung: 0;
Box-Größe: Rahmenbox;
Position: relativ;
}
html, Text {
Breite: 100 %;
Höhe: 100%;
}
#Behälter {
Breite: 100 %;
Höhe: 100%;
}
#Inhalt {
Hintergrund: blau;
}
#Fußzeile {
Breite: 100 %;
Höhe: 100px;
Hintergrund: rot;
}
.footer-fixiert {
Position: fest;
links: 0;
unten: 0;
}
</Stil>
</Kopf>
<Text>
<div id="Behälter">
<div id="content"> Inhalt </div>
<div id="Fußzeile">
Fußzeile
</div>
</div>
<Skripttyp="text/javascript">
let Höhe = document.getElementById('Container').ClientHeight - document.getElementById('Inhalt').ClientHeight;
// Hier fügen wir dem Footer eine weitere Klasse hinzu, um ihn zu fixieren, wenn (Höhe > 100) document.getElementById('footer').classList.add('footer-fixed');
</Skript>
</body>
</html>Basierend auf dem Prinzip, niemals JS zu verwenden, wenn CSS das Problem lösen kann, wird diese Methode zwar am einfachsten zu verstehen sein, aber dennoch nicht empfohlen. Darüber hinaus muss dieser CSS-Code die Client-Height abrufen, was dazu führt, dass die Seite neu formatiert und neu gezeichnet wird. Aus Leistungssicht wird dies nicht empfohlen. Methode 2: Verwenden Sie Flex-Layout + Mindesthöhe justify-content: space-between im Flex-Layout; mit der äußerst nützlichen Mindesthöhe kann es den Effekt des Absenkens der Fußzeile gerade noch ausgleichen, wenn der Inhalt nicht ausreicht Der Democode lautet wie folgt:
<!DOCTYPE html>
<html>
<Kopf>
<title>Fußzeilen-Bodeneffekt</title>
<style type="text/css">
div {
Rand: 0;
Polsterung: 0;
Box-Größe: Rahmenbox;
Position: relativ;
}
html, Text {
Breite: 100 %;
Höhe: 100%;
Rand: 0;
Polsterung: 0;
}
#Behälter {
Breite: 100 %;
// Schlüsselcode // Obwohl die Höhe des Containers unbekannt ist, kann eine Mindesthöhe festgelegt werden, die für das Layout von Vorteil ist. min-height: 100%;
Anzeige: Flex;
Flex-Richtung: Spalte;
Inhalt ausrichten: Abstand dazwischen;
}
#Inhalt {
Hintergrund: blau;
}
#Fußzeile {
Breite: 100 %;
Höhe: 100px;
Hintergrund: rot;
}
</Stil>
</Kopf>
<Text>
<div id="Behälter">
<div id="Inhalt">
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
</div>
<div id="Fußzeile">
Fußzeile
</div>
</div>
</body>
</html>Min-height ist wirklich ein sehr nützliches CSS-Attribut. In Kombination mit Flex kann damit leicht der Bottoming-Effekt erzielt werden. Methode 3: Verwenden Sie Flex + Margin-Top Diesen Trick lernte ich, als ich über die wunderbaren Einsatzmöglichkeiten von Margin Auto sprach. Im Kontext der Flex-Formatierung verteilt Margin Auto den verbleibenden Platz automatisch. Hier können wir margin-top:auto im Footer verwenden, um den Bottoming-Effekt zu erzielen.
<!DOCTYPE html>
<html>
<Kopf>
<title>Fußzeilen-Bodeneffekt</title>
<style type="text/css">
div {
Rand: 0;
Polsterung: 0;
Box-Größe: Rahmenbox;
Position: relativ;
}
html, Text {
Breite: 100 %;
Höhe: 100%;
Rand: 0;
Polsterung: 0;
}
#Behälter {
Breite: 100 %;
Mindesthöhe: 100 %;
Anzeige: Flex;
Flex-Richtung: Spalte;
}
#Inhalt {
Hintergrund: blau;
}
#Fußzeile {
Breite: 100 %;
Höhe: 100px;
Hintergrund: rot;
margin-top: auto; // Schlüsselcode}
</Stil>
</Kopf>
<Text>
<div id="Behälter">
<div id="Inhalt">
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
Inhalt <br>
</div>
<div id="Fußzeile">
Fußzeile
</div>
</div>
</body>
</html>Zusammenfassung: Die oben genannten drei Methoden haben keine Nebenwirkungen. Tatsächlich gibt es andere Möglichkeiten, diesen Senkeffekt zu erzielen, aber sie wirken sich auf andere Layouts aus. Ich werde hier nicht ins Detail gehen. Ich werde es später aktualisieren, wenn es eine bessere Lösung gibt. |
<<: HTML-Sonderzeichen-Konvertierungstabelle
>>: So lösen Sie das Problem, dass Tomcat9.exe abstürzt
Artikel empfehlen
Verwenden Sie das NJS-Modul, um JS-Skripte in die Nginx-Konfiguration einzuführen
Inhaltsverzeichnis Vorwort 1. NJS-Modul installie...
Fallstricke und Lösungen bei der MySQL-Zeitstempelvergleichsabfrage
Inhaltsverzeichnis Fallstricke bei Zeitstempelver...
Detaillierte Erklärung der MySQL Truncate-Verwendung
Inhaltsverzeichnis MySQL Truncate-Verwendung 1. T...
So implementieren Sie eine Array-Lazy-Evaluation-Bibliothek in JavaScript
Inhaltsverzeichnis Überblick So erreichen Sie es ...
Beispielcode zur Implementierung eines 3D-Text-Hover-Effekts mit CSS3
In diesem Artikel wird der Beispielcode von CSS3 ...
CSS-Probleme bei der gemeinsamen Verwendung von „Position:fixed“ und „Margin-top“ auf Elementen derselben Ebene
Problembeschreibung Ich möchte CSS verwenden, um ...
Lösung für das Problem der Werteübergabe zwischen HTML-Seiten
Als ich den Aufsatz zum ersten Mal verwendete, füh...
Detaillierte Erklärung dynamisch generierter Tabellen mit Javascript
*Seite erstellen: zwei Eingabefelder und ein Butt...
MySQL InnoDB-Quellcodeanalyse für Transaktionssperren
Inhaltsverzeichnis 1. Schloss und Riegel 2. Wiede...
Linux (Center OS7) installiert JDK, Tomcat und MySQL, um eine Ausführungsumgebung für Java-Webprojekte zu erstellen.
1. JDK installieren 1. Deinstallieren Sie die alt...
Implementieren benutzerdefinierter Radio- und Kontrollkästchenfunktionen mit reinem CSS
1. Erzielen Sie den Effekt 2 Wissenspunkte 2.1 &l...
Bootstrap 3.0 Studiennotizen Grid-System-Fall
Vorwort Im vorherigen Artikel haben wir hauptsäch...
So weisen Sie einer Instanz in Linux eine öffentliche IP-Adresse zu
beschreiben Beim Aufruf dieser Schnittstelle müss...
So starten und stoppen Sie das Shell-Skript zur Bereitstellung eines SpringBoot-JAR-Programms unter Linux
Lassen Sie mich Ihnen ohne weitere Umschweife den...
Rufen Sie die JS-Funktion oder JS-Variable in HTMLs img src="" auf, um den Bildpfad dynamisch anzugeben
Ich habe viele Online-Ressourcen zu diesem Problem...