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

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

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)

Artikel empfehlen

Die MySQL-Funktionen DATE_ADD und ADDDATE fügen einem Datum ein angegebenes Zeitintervall hinzu

Die MySQL-Funktionen DATE_ADD(date,INTERVAL expr ...

Beispielcode und Methode zum Speichern von Arrays in MySQL

Beim Schreiben gespeicherter Prozeduren werden hä...

Zehn beliebte Regeln für das Interface-Design

<br />Dies ist ein Artikel, den ich vor lang...

Installation und Verwendung von Vue

Inhaltsverzeichnis 1. Vue-Installation Methode 1:...

Detaillierte Erklärung des Befehls zum Anzeigen von Protokolldateien in der Linux-Umgebung

Inhaltsverzeichnis Vorwort 1. cat-Befehl: 2. weit...

Detaillierte Erklärung zur Verwendung von Join zur Optimierung von SQL in MySQL

0. Bereiten Sie relevante Tabellen für die folgen...

Detaillierte Erklärung der Whitelist-Regeln von nginx-naxsi

Syntax der Whitelist-Regel: Grundregel wl:ID [neg...

Wann ist die Verwendung von dl, dt und dd sinnvoll?

dl: Definitionsliste Definitionsliste dt: Definiti...

Detaillierte Erklärung des Prinzips der Docker-Image-Schichtung

Basisbild Das Basisbild hat zwei Bedeutungen: Ist...

Tiefgreifendes Verständnis des Ereignisausführungsmechanismus von JavaScript

Inhaltsverzeichnis Vorwort Das Prinzip der asynch...

Tomcat erhält den Clientdomänennamen des Nginx-Reverse-Proxys

Frage Nach dem Nginx-Reverse-Proxy erhält die Tom...

CSS erstellt Tippboxen, Bubble-Boxen und Dreiecke

Manchmal benötigen unsere Seiten Eingabeaufforder...

So verwenden Sie SVG-Symbole in WeChat-Applets

SVG wurde in den letzten Jahren aufgrund seiner v...

CSS implementiert verschiedene Ladeeffekte mit Parsing-Prozess

HTML <div Klasse="Spinner"></d...

Detailliertes Tutorial zum Ändern des Root-Passworts, wenn man es in MySQL 5.7 vergessen hat

Vorwort Die Anwendungs- und Lernumgebung von MySQ...