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

Verwenden Sie @font-face, um Sonderzeichen auf Webseiten zu implementieren (benutzerdefinierte Schriftarten erstellen)

CSS setzt die Höhe des Box-Containers (div) immer auf 100 %

Verwenden Sie @font-face, um Sonderzeichen auf Webseiten zu implementieren (benutzerdefinierte Schriftarten erstellen)

Wie der Linux-Kernel in den Prozessadressraum eindringt und den Prozessspeicher ändert

Lösen Sie das Problem des MySql8.0-Prüfungsfehlers der Transaktionsisolationsebene

Zusammenfassung der Browserkompatibilität gängiger CSS-Eigenschaften (empfohlen)

So konfigurieren Sie die Portweiterleitung für Docker unter CentOS 7, damit sie mit der Firewall kompatibel ist

So ermitteln Sie die Höhe des MySQL InnoDB B+-Baums

Mehrere Elemente in derselben Zeile unter Div in CSS rechtsbündig ausrichten

Die spezifische Verwendung von CSS-Attributen zur Optimierung der Frontend-Seitendarstellung wird sich ändern

JS-Funktionsaufruf, Anwenden und Binden einer superdetaillierten Methode

Detaillierte Erklärung von MySQLs Seconds_Behind_Master

Artikel empfehlen

So verwenden Sie HTML+CSS zum Erstellen einer TG-Vision-Homepage

So verwenden Sie xshell zum Herstellen einer Verbindung zu Linux in VMware (2 Methoden)

Detaillierte Erklärung zur Verwendung von Rastereigenschaften in CSS

Detaillierte Erklärung zur korrekten Öffnung in CSS

So ändern Sie die Standardcodierung von MySQL in Linux

Installieren Sie Ubuntu 18 ohne USB-Laufwerk unter Windows 10 mit EasyUEFI

Eine kurze Diskussion über zwei Methoden zum Erreichen einer halbtransparenten Hintergrundfarbe in CSS

Einführung und Verwendung des JS-Beobachtermodus

Neue Einstellungen für Text und Schriftarten in CSS3

Linux-Installation, MongoDB-Start und Lösung allgemeiner Probleme

So installieren und deinstallieren Sie IIS7-Komponenten mithilfe der WIN2008-Serverbefehlszeile

Eine detaillierte Einführung in die Grundlagen des Linux-Scriptings

Detaillierte Erklärung des Rastersystems, der Navigationsleiste und des Karussells von Javascript Bootstrap

Natives JS zum Implementieren der Seitenleiste zum Teilen

Holen Sie sich den berechneten Stil im CSS-Element (nach dem kaskadierenden/finalen Stil).