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)

Bauprozess eines privaten Docker-Lagerhafens

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

Bauprozess eines privaten Docker-Lagerhafens

So verwenden Sie jconsole zum Überwachen von Remote-Tomcat-Diensten

Analyse und Beschreibung von Netzwerkkonfigurationsdateien unter Ubuntu-System

Detaillierte Erklärung der in JavaScript integrierten Objekte, Mathematik und Zeichenfolgen

Detaillierte Erklärung von MySQLs Seconds_Behind_Master

Unterschied zwischen varchar- und char-Typen in MySQL

Zusammenfassung der Berechtigungsprobleme bei gespeicherten MySQL-Prozeduren

Beispielcode für CSS-Flex-Layout mit automatischem Zeilenumbruch

Tutorial zur Installation und Verwendung von virtualenv in Deepin

Detaillierte Erklärung zum MySQL-Datenarchivierungstool mysql_archiver

Artikel empfehlen

Richtige Methode zum Laden von Schriftarten in Vue.js

Praktische Hinweise zur Installation von Jenkins mit Docker-Compose

So fügen Sie einem Feld in MySQL eine Standardzeit hinzu

Optimierung der Abfragegeschwindigkeit von MySQL mit mehreren zehn Millionen Daten mithilfe von Indizes

CSS-Schreibformat, detaillierte Erklärung der Grundstruktur einer mobilen Seite

MySql implementiert die Seitenabfragefunktion

Detaillierte Erläuterung von MySQL-Abfragebeispielen für mehrere Tabellen [Linkabfrage, Unterabfrage usw.]

Detaillierte Erläuterung der ersten Erfahrungen mit Vue3.0 + TypeScript + Vite

Reines CSS, um einen bewölkten Wettersymboleffekt zu erzielen

MySQL-Optimierungsstrategie (empfohlen)

Unterschiede zwischen Windows Server 2008R2, 2012, 2016 und 2019

Stil-Trigger-Effekt des Webseiten-Eingabefelds

So verwenden Sie mysqladmin, um die aktuellen TPS und QPS einer MySQL-Instanz abzurufen

In einem Artikel erfahren Sie, wie Sie mehrere DIVs und Schaltflächenbindungs-Eingabeereignisse in VUE implementieren

Der Unterschied und die Verwendung von Strg+z, Strg+c und Strg+d in Linux-Befehlen