CSS-Methode zur Steuerung der Elementhöhe von unten nach oben und von oben nach unten
|
Beginnen wir die Diskussion mit einer häufig gestellten Frage: Wie verwende ich CSS, um die Höhe eines Elements auf die [Höhe des Browserinhaltsfensters] einzustellen? Lösung 1: Machen Sie das Element bildschirmfüllend In CSS ist vh eine spezielle Längeneinheit. Der Wert 100vh ist die [Höhe des Browserinhaltsfensters]. Daher sorgt Lösung 2: Verwenden Sie eine Kaskadenhöhe von 100 %. Mit Methode 1 kann nur ein Element auf die [Höhe des Browserinhaltsfensters] eingestellt werden. Was aber, wenn wir möchten, dass eine Reihe von Elementen gemeinsam die gesamte Höhe einnimmt? Diese Anforderung kommt in Web-Anwendungsszenarien sehr häufig vor. Damit Ihre Webanwendung wie eine native Anwendung aussieht, hoffen wir, dass die Gesamtstruktur der Anwendung immer den gesamten Bildschirm ausfüllt, nicht mehr und nicht weniger, und dass keine Bildlaufleisten angezeigt werden. Wenn viel Inhalt vorhanden ist, der gescrollt werden muss, wird möglicherweise in einem Div innerhalb der Anwendung eine Bildlaufleiste angezeigt, der Hauptteil der Anwendung scrollt jedoch nicht. Dies ist ein Beispiel für reduzierte Höhe, bei der die Gesamthöhe vollständig von der Höhe des Inhalts abhängt, was hässlich ist:
Dies ist ein Beispiel für eine zu große Höhe. Über der gesamten Anwendung wird eine Bildlaufleiste angezeigt, und die obere Leiste kann weggescrollt werden:
Wenn die gesamte Seite gescrollt werden kann, wird nach dem Herunterscrollen auch der Inhalt der oberen Leiste nach oben gescrollt und verschwindet. Dies kommt auf normalen Webseiten häufig vor, sollte in Webanwendungen jedoch nicht passieren. Dies ist ein ganz normales Beispiel. Bei einer gut implementierten Webanwendung kann nicht die gesamte Anwendung gescrollt werden, das Inhaltsfenster in der Mitte ist jedoch scrollbar:
Lösung: Kontrollhöhe von oben nach unten Die Gründe für einen Höheneinbruch und eine übermäßige Höhe sind eigentlich dieselben: Die Höhe des übergeordneten Elements wird durch die Höhe des untergeordneten Elements beeinflusst. Mit anderen Worten: Das übergeordnete Element wird durch das untergeordnete Element „erweitert“. Ein hohes Maß an Kontrolle erfolgt von unten nach oben. Der Grund, warum die Höhe des übergeordneten Elements durch das untergeordnete Element gestreckt wird, besteht darin, dass der Standardwert für die Höhe Um diese beiden Probleme zu lösen, muss die Richtung der Höhenregelung umgekehrt werden: Die Höhe wird von oben nach unten geregelt. Definieren Sie insbesondere entweder eine explizite Höhe für das Element oder legen Sie eine relative Höhe (in Prozent) im Verhältnis zur Höhe des „Großvaterelements“ fest.
Solange die beiden oben genannten Punkte flexibel verwendet werden, können Entwickler die Höhe jedes Elements der gesamten Anwendung steuern. Im obigen Web-Anwendungsbeispiel lautet die Lösung: Stellen Sie zunächst die Höhe des <html>-Elements auf 100 % ein, wodurch die Höhe des HTML-Elements genau der Höhe des Ansichtsfensters (Inhaltsfensters) entspricht. Stellen Sie anschließend die Höhe des Body-Elements auf 100 % ein, wodurch die Höhe des Body-Elements genau der Höhe des HTML-Elements entspricht (die wiederum der Höhe des Ansichtsfensters entspricht). Dies ist ein Sonderfall von Top-Down. Tatsächlich können Sie beim Einstellen der Höhe von oben nach unten einen festen Wert (100 Pixel) oder eine andere prozentuale Höhe (80 %) entsprechend Ihren eigenen Layoutanforderungen festlegen. Diese Methode ist tatsächlich viel problematischer, als die direkte Festlegung von Wenn Sie nur die Praktische Tipps von oben nach unten: Lassen Sie untergeordnete Elemente den verbleibenden Bereich des übergeordneten Elements ausfüllen Der Top-Down-Ansatz hat einen sehr praktischen Trick:
<html>
<Text>
<Kopfzeile></Kopfzeile>
<div Klasse="Inhalt"></div>
</body>
</html> Wenn die Höhe von <html> und <body> bereits bestimmt ist (100 % Ansichtsfenster) und die Höhe der Kopfzeile ebenfalls bestimmt ist (64 px), wie können wir dann dafür sorgen, dass
Top-down vs. Bottom-up Dies bedeutet nicht, dass ein Top-down-Ansatz unbedingt besser ist als ein Bottom-up-Ansatz. Der Vorteil des Top-Down-Ansatzes besteht darin, dass die Höhe des Nachfolgerelements entsprechend bestimmt wird, solange die Höhe des Vorgängerelements definiert ist. Der Vorteil von Bottom-Up besteht darin, dass die Höhe des übergeordneten Elements je nach Bedarf automatisch erweitert werden kann und alle untergeordneten Elemente einfach umschlossen werden. In einer Webanwendung ist es häufig notwendig, diese beiden Methoden zu mischen. Vorsicht vor Inhaltsüberlauf Beachten Sie, dass ein Überlauf auftritt, wenn das Inhaltsfeld eines übergeordneten Elements nicht genügend Platz für ein untergeordnetes Element bietet. Beim Mischen von Top-Down- und Bottom-Up-Ansätzen kann folgendes Problem auftreten: Das A-Element ist das übergeordnete Element des B-Elements. Die Höhe von Element A wird von oben nach unten bestimmt (z. B. Erwägen Sie zu diesem Zeitpunkt zwei Optionen:
Das Chatfenster ist ein Beispiel für overflow:auto
Verweise https://stackoverflow.com/questions/7357818/wie-kann-ein-html-element-mit-css-100-der-verbleibenden-bildschirmhöhe-ausfüllen Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
<<: Detaillierte Erläuterung des Implementierungsprinzips der Transaktionsisolationsstufe in MySQL
>>: Fassen Sie die häufigsten Anwendungsprobleme von XHTML-Code zusammen
Artikel empfehlen
Auswahl und Überlegungen zur MySQL-Datensicherungsmethode
Inhaltsverzeichnis 1. rsync, cp Dateien kopieren ...
So verarbeiten Sie sehr große Formularbeispiele mit Vue+ElementUI
Aufgrund von Geschäftsanpassungen im Unternehmen ...
Wie viele Ports kann ein Linux-Server maximal öffnen?
Inhaltsverzeichnis Hafenbezogene Konzepte: Bezieh...
MySQL-Serie 9 MySQL-Abfrage-Cache und -Index
Inhaltsverzeichnis Tutorial-Reihe 1. MySQL-Archit...
Detaillierter Prozess zur Installation von Docker, zum Erstellen von Images, zum Laden und Ausführen von NodeJS-Programmen
Systemumgebung: Windows 7 1. Docker installieren ...
CSS-Implementierungscode für verzerrte Schatten
Dieser Artikel stellt den Implementierungscode vo...
So installieren und konfigurieren Sie den Postfix-Mailserver unter CentOS 8
Postfix ist ein kostenloser und quelloffener MTA ...
Docker Compose-Installationsmethoden in verschiedenen Umgebungen
1. Online-Installation Derzeit habe ich nur die O...
5 Dinge, die beim Schreiben von React-Komponenten mit Hooks zu beachten sind
Inhaltsverzeichnis 01. Verwenden Sie useState, we...
Echtzeitaktualisierung einer langen Verbindung auf der Vue+WebSocket-Seite
In letzter Zeit muss das Vue-Projekt die Daten in...
Tomcat meldet einen Fehler beim Starten des Springboot-Projekt-War-Pakets: Fehler beim Starten des untergeordneten
Heute ist das Springboot-Projekt des Unternehmens...
Fehler bei der Eingabe chinesischer Zeichen im Flex-Programm Firefox
In niedrigeren Versionen von Firefox können keine ...
jQuery realisiert den Scroll-Effekt von Tabellenzeilendaten
In diesem Artikelbeispiel wird der spezifische Co...
Lösung für das Problem, dass Elemente mit negativem Z-Index nicht angeklickt werden können
Ich habe kürzlich an einer Popup-Anzeige gearbeite...
Detaillierte Analyse des langsamen Abfrageproblems beim Senden von MySQL-Daten
Anhand eines Beispiels habe ich Ihnen die Lösung ...