CSS setzt die Höhe des Box-Containers (div) immer auf 100 %
|
Vorwort Manchmal muss die Höhe eines Box-Containers immer bei 100 % bleiben, unabhängig davon, wie Sie im Browser zoomen. Genau wie die Seitenleiste auf einigen Websites, aber das direkte Festlegen der Höhe des Box-Containers auf 100 % funktioniert nicht. Demo Damit die prozentuale Höhe eines Elements (100 %;) funktioniert, müssen Sie für die Höhe aller übergeordneten Elemente einen gültigen Wert festlegen. Nehmen Sie zum Beispiel die Demo unten. Die übergeordneten Elemente von div sind body und html. Stellen Sie also einfach sowohl das übergeordnete Element als auch das Element selbst auf 100 % Höhe ein. <!DOCTYPE html> <html> <Kopf> <title>Dokument</title> </Kopf> <Text> Ich möchte, dass das <div> eine Höhe von 100 % hat, damit ich es beliebig skalieren kann. </div> </body> </html> CSS:
html, Text, Div{
Höhe: 100 %;
}
/* Füge dem div einfach einige Stile hinzu */
div{
Hintergrund: rot;
Breite: 200px;
}
Wirkung:
Dies ist das Ende dieses Artikels darüber, wie Sie die Höhe des Box-Containers (Div) mit CSS immer auf 100 % einstellen können. Weitere Informationen dazu, wie Sie die Div-Höhe immer auf 100 % einstellen können, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Welche Wissenssysteme brauchen Webdesigner?
>>: jQuery implementiert alle Warenkorbfunktionen
Artikel empfehlen
3 Möglichkeiten zum Hinzufügen von Links zu HTML-Auswahl-Tags
Der Erste : Code kopieren Der Code lautet wie folg...
Erfahren Sie, wie Sie den JVM-Speicher von Tomcat über JConsoler überwachen
Inhaltsverzeichnis 1. So überwachen Sie Tomcat 2....
Detaillierte Erläuterung der MySQL-Optimierung für Schreibprobleme im großen Maßstab
Zusammenfassung: Wenn über die Leistungsoptimieru...
Grafisches Tutorial zur Installation und Konfiguration von Ubuntu Server 18.04.5 LTS Server Edition
1. Ubuntu Server 18.04.5 LTS-Systeminstallation U...
Erste Schritte mit Front-End-Vue-Unit-Tests
Inhaltsverzeichnis 1. Warum brauchen wir Unit-Tes...
Detaillierte Erläuterung der logischen Architektur von MySQL
1. Gesamtarchitekturdiagramm Im Vergleich zu ande...
Eine Fallstudie zur MySQL-Optimierung
1. Hintergrund Auf jeder OLTP-Datenbankinstanz vo...
Was sind die Unterschiede zwischen SQL und MySQL
Was ist SQL? SQL ist eine Sprache zum Betrieb von...
8 leistungsstarke Techniken zum Erstellen von HTML-Webseiten
<br />Es gibt zwar viele Tools zum Erstellen...
MySQL-Abfragemethode mit mehreren Bedingungen
MySQL-Abfrage mit mehreren Bedingungen Umgebung: ...
Erstellen einer verteilten Selenium-Umgebung basierend auf Docker
1. Laden Sie das Bild herunter Docker-Pull Seleni...
MySQL 5.6.27 Installations-Tutorial unter Linux
In diesem Artikel finden Sie das Installations-Tu...
DELL R730 Serverkonfiguration RAID und Installation Serversystem und Domänensteuerung ausführliches grafisches Tutorial
Das Unternehmen hat kürzlich einen DELL R730-Serv...
MySQL Advanced Learning Notes (Teil 3): Einführung in die logische Architektur von MySQL, detaillierte Erläuterung der MySQL-Speicher-Engine
Einführung in die logische MySQL-Architektur Über...
Einführung in die Vue3 Composition API
Inhaltsverzeichnis Überblick Beispiel Warum wird ...