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
Datagrip2020 kann MySQL-Treiber nicht herunterladen
Wenn Sie es nicht durch direktes Klicken auf „Dow...
jQuery implementiert die Funktion zum Hinzufügen und Löschen von Mitarbeiterinformationen
In diesem Artikel wird der spezifische Code von j...
Die Verwendung von „group by“ in MySQL führt immer zu Fehler 1055 (empfohlen)
Da die Verwendung von group by in MySQL immer zu ...
Front-End-JavaScript-Funktionsprinzip
Inhaltsverzeichnis 1. Was ist eine JavaScript-Eng...
Lösen Sie das Problem, dass dem Benutzer „root“@„%“ der Zugriff auf die Datenbank „xxx“ verweigert wurde, nachdem eine Datenbank in MySQL erstellt wurde.
Vorwort Ich hatte kürzlich ein Problem bei der Ar...
Manuelle und geplante Sicherungsschritte für die MySQL-Datenbank
Inhaltsverzeichnis Manuelle Sicherung Timer-Siche...
Erklären Sie kurz die Verwendung von „group by“ in SQL-Anweisungen
1. Übersicht Gruppieren nach bedeutet, Daten nach...
Eine kurze Analyse von SQL-Beispielen zum Auffinden nicht festgeschriebener Transaktionen in MySQL
Vor langer Zeit habe ich einen Blogbeitrag mit de...
Detaillierte Erläuterung des Installationsprozesses der Standard-MySQL-Version (x64) für Windows
MySQL x64 stellt kein Installationsprogramm berei...
Praktischer Bericht über die Entwicklung von Vue3- und TypeScript-Projekten
Inhaltsverzeichnis Überblick 1. Kompositions-API ...
Bereitstellungs- und Installationsdiagramm für die Servervirtualisierung von VMware vSphere 6.0 (detaillierte Schritte)
1. Wichtige Punkte für die frühzeitige Planung de...
Übersicht über die Zeitkonfiguration unter Linux-System
1. Zeitarten werden unterteilt in: 1. Netzwerkzei...
Weitere Möglichkeiten zur Verwendung von spitzen Klammern in Bash
Vorwort In diesem Artikel werden wir weitere Verw...
Implementierung des Docker-CPU-Limits
1. --cpu=<Wert> 1) Geben Sie an, wie viele ...
Schritte zum Aktivieren des MySQL-Datenbanküberwachungs-Binlogs
Vorwort Wir müssen häufig etwas basierend auf bes...