Warum funktioniert Ihre Größe: 100 % nicht?

Dieses Wissen ist nicht unpopulär, aber es kann dennoch verwirrend sein, wenn Sie es verwenden. Wenn es nicht funktioniert, können Sie die Antwort zwar durch Suchen finden, aber verstehen Sie sie wirklich? Warum wird die Höhe nicht durch % gesteuert, wenn man ein Vollbildelement einstellen möchte?

1. Festlegen der prozentualen Breite und Höhe

Anhand der Breiten- und Höhenattribute in w3c lässt sich deutlich erkennen, dass Breite und Höhe entsprechend der Breite und Höhe des übergeordneten Elements festgelegt werden:
https://www.w3school.com.cn/cssref/pr_dim_width.asp
https://www.w3school.com.cn/cssref/pr_dim_height.asp

2. Breite: 100 %;

Wir schreiben einen Code wie diesen und legen eine Hintergrundfarbe nach dem Zufallsprinzip fest, um die Beobachtung der Elemente zu erleichtern. Achten Sie auf den folgenden Code und denken Sie daran, <!DOCTYPE html> hinzuzufügen, da es sonst zu Abweichungen kommt.

<Text>
    <div style="Breite:100%;Höhe:100%;Hintergrundfarbe:blauviolett;">
    Breite: 100 %; Höhe: 100 %;
    </div>
</body>
//Die Breite beträgt 100 %, die Höhe, die wir jetzt sehen, gehört zur Schriftgröße, nicht zu 100 %;

<Text>
    <div style="Breite: 100%; Höhe: 200px; Hintergrundfarbe: blauviolett;">
    Breite: 100 %; Höhe: 200 Pixel;
    </div>
</body>
//Die Wirkung ist wie folgt

Sie sehen, dass eine Breite von 100 % problemlos zu erreichen ist, die Höhe hier jedoch nicht auf ein Prozentverhältnis eingestellt werden kann (das Element würde verschwinden). Warum ist das so?

3. Wie berechnet der Browser Höhe und Breite?

Webbrowser berücksichtigen die offene Breite des Browserfensters bei der Berechnung der effektiven Breite. Wenn Sie keinen Standardwert für die Breite festlegen, teilt der Browser den Seiteninhalt automatisch so auf, dass er die gesamte horizontale Breite ausfüllt. Das heißt, wenn wir die Breite nicht festlegen, wird automatisch die gesamte horizontale Breite wie folgt ausgefüllt:

<div style="Höhe:100%;">Höhe:100%;</div>

Die Berechnung der Höhe erfolgt jedoch auf eine völlig andere Art und Weise. Tatsächlich berechnen Browser die Höhe des Inhalts überhaupt nicht, es sei denn, der Inhalt überschreitet das Ansichtsfenster (wodurch Bildlaufleisten angezeigt werden). Oder Sie legen eine absolute Höhe für die gesamte Seite fest. Andernfalls lässt der Browser den Inhalt einfach nach unten stapeln, ohne die Höhe der Seite überhaupt zu berücksichtigen.
Da die Seite keinen Standardhöhenwert hat, können Sie beim Festlegen der Höhe eines Elements als Prozentsatz nicht die Höhe des übergeordneten Elements ermitteln und daher auch nicht dessen eigene Höhe berechnen.
Das heißt, die Höhe des übergeordneten Elements ist lediglich ein Standardwert: Höhe: auto; wenn wir die Höhe auf 100 % setzen, fordern wir den Browser auf, die prozentuale Höhe auf Grundlage eines solchen Standardwerts zu berechnen, und wir erhalten nur undefinierte Ergebnisse. Das heißt, es handelt sich um einen Nullwert, und der Browser reagiert nicht auf diesen Wert.
Verschiedene Browser interpretieren Breite und Höhe unterschiedlich, Sie können daher selbst danach suchen.

4. So lösen Sie

Jetzt wissen Sie, dass % eine Höhe ist, die relativ zum übergeordneten Element berechnet wird. Damit dies wirksam wird, müssen wir die Höhe des übergeordneten Elements festlegen.
Zu beachten ist, dass das übergeordnete Element der Elemente in <body> nicht nur <body>, sondern auch <html> ist.
Daher müssen wir die Höhe beider gleichzeitig festlegen. Die Einstellung nur eines von beiden funktioniert nicht:

 html,Text{
            Höhe: 100%;
            Rand: 0;
            Polsterung: 0;
        }

5. Ein Missverständnis bezüglich der Zeilenhöhenzentrierung?

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dokument</title>
    <Stil>
        html,Text{
            Höhe: 100%;
            Rand: 0;
            Polsterung: 0;
        }
        div {
            Farbe: weiß;
            Textausrichtung: zentriert;
            Schriftgröße: 30px;
            Zeilenhöhe: 100 %;
            Hintergrundfarbe: blauviolett;
        }
    </Stil>
</Kopf>

<Text>
    <!-- <div style="Breite:100%;Höhe:100%;">Breite:100%;Höhe:100%;</div> -->
    <div style="Höhe:100%;">Höhe:100%;</div>
    <!-- <div style="Breite:100%;Höhe:200px;">Breite:100%;Höhe:200px;</div> -->
</body>

</html>

Alle Codes sind wie oben. Sie können sehen, dass die Zeilenhöhe auf 100 % eingestellt ist, aber nicht zentriert ist. Warum ist das so? Weil der %-Wert zu diesem Zeitpunkt relativ zur Schriftgröße ist. Daher ist es nicht möglich, direkt auf Elemente einzuwirken, die keine absolute Höhe haben.

Beschreibung der Zeilenhöheneigenschaft: https://www.w3school.com.cn/cssref/pr_dim_line-height.asp

Wenn Sie es zu diesem Zeitpunkt zentrieren möchten, können Sie wie folgt ein verschachteltes Div erstellen, eines für die Höhe und eines für die Zentrierung. Obwohl es nicht auf diese Weise verwendet zu werden scheint, ist die Zentrierung immer noch sehr effektiv ~

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dokument</title>
    <Stil>
        html,
        Körper {
            Höhe: 100%;
            Rand: 0;
            Polsterung: 0;
        }

        .div1 {
            Hintergrundfarbe: blauviolett;
            Position: relativ;
        }

        .div2 {
            Schriftgröße: 30px;    
            Farbe: weiß;
            Textausrichtung: zentriert;                    
            Breite: 400px;
            Position: absolut;
            links: 50%;
            oben: 50 %;
            transformieren: versetzeX(-50%) versetzeY(-50%);
        }
    </Stil>
</Kopf>

<Text>
    <!-- <div style="Breite:100%;Höhe:100%;">Breite:100%;Höhe:100%;</div> -->
    <div Stil="Höhe:100%;" Klasse="div1">
        <div class="div2">Höhe: 100 %;</div>
    </div>
    <!-- <div style="Breite:100%;Höhe:200px;">Breite:100%;Höhe:200px;</div> -->
</body>

</html>

6. Quellcode

https://github.com/JiaXinYi/ife-study/blob/master/height/height.html

Verkehrsanbindung:

(...) Front-End-Wissen – Warum funktioniert die von Ihnen geschriebene Höhe von 100 % nicht? _Wissen warum - Frontend - SegmentFault

Dies ist das Ende dieses Artikels darüber, warum die von Ihnen geschriebene Höhe: 100 % nicht funktioniert. Weitere verwandte Inhalte zum Thema „Höhe: 100 % funktioniert nicht“ finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Detaillierte Erklärung zur Verwendung des HTML-Webpack-Plugins

>>: Front-End-Implementierung der GBK- und GB2312-Kodierung und Dekodierung von Zeichenfolgen (Zusammenfassung)

Probleme und Lösungen für die Bereitstellung der Dual-Active-Architektur Nginx+KeepAlived-Cluster in VMware

Ein Beispiel für die Verwendung von CSS3-Animation, um den Effekt eines Kreises zu erzielen, der sich von klein nach groß ausdehnt und nach außen ausbreitet

Artikel

TimePicker im Element deaktiviert einen Teil der Zeit (deaktiviert auf Minuten)

Artikel

Vue.js implementiert Erläuterungen zum Tab-Umschalten und Farbwechseln

Artikel

Warum funktioniert Ihre Größe: 100 % nicht?

1. Festlegen der prozentualen Breite und Höhe

2. Breite: 100 %;

3. Wie berechnet der Browser Höhe und Breite?

4. So lösen Sie

5. Ein Missverständnis bezüglich der Zeilenhöhenzentrierung?

6. Quellcode

Probleme und Lösungen für die Bereitstellung der Dual-Active-Architektur Nginx+KeepAlived-Cluster in VMware

So stellen Sie eine Datenbank und eine Tabelle aus einer vollständigen MySQL-Datenbanksicherung wieder her

Erklärung des HTML-Codes der Webseite: geordnete Liste und ungeordnete Liste

Detaillierte Erläuterung des Installations- und Verpackungsfalls von JavaScript Axios

Eine kurze Diskussion über die spezifische Verwendung von Ansichtsfenstern in mobilen Endgeräten

Detaillierte Erklärung zu Javascript-Dateien und Blobs

Detaillierte Erklärung der privaten Klassenfelder von JavaScript und der privaten Modifizierungen von TypeScript

Ein Beispiel für die Verwendung von CSS3-Animation, um den Effekt eines Kreises zu erzielen, der sich von klein nach groß ausdehnt und nach außen ausbreitet

TimePicker im Element deaktiviert einen Teil der Zeit (deaktiviert auf Minuten)

Vue.js implementiert Erläuterungen zum Tab-Umschalten und Farbwechseln

Artikel empfehlen

Einige wichtige Punkte des visuellen Website-Designs

Beispielcode zur Implementierung des sekundären Verknüpfungseffekts der Dropdown-Box in Vue

Detaillierte Erläuterung der perfekten CSS3+JS-Implementierung des Lupenmodus

Beherrschen Sie einfach die Verwendung horizontaler Zeilenanmerkungen und Codekommentare in HTML

So stellen Sie Daten mit Binlog in MySQL 5.7 wieder her

Erste Schritte Tutorial für Anfänger⑧: Einfaches Erstellen einer Artikel-Site

So installieren Sie die Linux-Onlinesoftware gcc online

Sublime/vscode – schnelle Implementierung zur Generierung von HTML-Code

So verwenden Sie „Explain“, um den SQL-Ausführungsplan in MySql abzufragen

Verwendung der Zabbix-API in einer Linux-Shell-Umgebung

So implementieren Sie Seitensprünge in einem Vue-Projekt

Faint: „Nutzen Sie Web 2.0, um standardkonforme Seiten zu erstellen“

Erstellen Sie ein privates Docker-Warehouse (selbstsignierte Methode)

Zusammenfassung der drei Regeln für die React-Statusverwaltung

Mysql Master-Slave-Synchronisation Last_IO_Errno:1236 Fehlerlösung