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
Erfahren Sie, wie Sie mithilfe des Nginx-Dienstes eine Subdomain-Umgebung erstellen, um die Ladeleistung von 2D-Karten zu verbessern.
1. Hintergrund Vor kurzem stießen einige Freunde ...
jquery+springboot realisiert die Datei-Upload-Funktion
In diesem Artikelbeispiel wird der spezifische Co...
So installieren Sie einen SVN-Server unter Linux
1. Yum-Installation yum installiere Subversion 2....
Natives JS zum Erzielen digitaler Tisch-Spezialeffekte
Dieser Artikel beschreibt einen Digitaluhreffekt,...
Detaillierte Erläuterung der Linux-Befehle „Datei überschreiben“ und „Datei anhängen“
1. Der Unterschied zwischen den Befehlen > und...
Tabelle der durch hasLayout verursachten CSS-Fehler
Der IE hat schon seit längerem Probleme. Als alle ...
Vue implementiert einen dynamischen kreisförmigen prozentualen Fortschrittsbalken
Als ich kürzlich ein kleines Programm entwickelte...
Eine vollständige Anleitung zur Docker-Befehlszeile (18 Dinge, die Sie wissen müssen)
Vorwort Ein Docker-Image besteht aus einer Docker...
Implementierung der CentOS8.0-Netzwerkkonfiguration
1. Unterschiede in der Netzwerkkonfiguration zwis...
Vue3 (III) Website Homepage Layout Entwicklung
Inhaltsverzeichnis 1. Einleitung 2. Tatsächliche ...
Einrichten von VMware vSphere in VMware Workstation (Grafisches Tutorial)
VMware vSphere ist die branchenführende und zuver...
Diskussion über sinnvollere Erstellungsregeln für MySQL-String-Indizes
Vorwort In Bezug auf die Verwendung von MySQL-Ind...
Eine Kurzanleitung zu MySQL-Indizes
Die Einrichtung eines MySQL-Index ist für den eff...
Detaillierte Analyse des React Native-Startvorgangs
Einführung: Dieser Artikel verwendet das von reac...
JS implementiert die Append-Funktion von jQuery
Inhaltsverzeichnis Zeig mir den Code Testen Sie d...