Lösung für das Problem der Div-Höhe 100 % unter Deklaration

高洛峰
Freigeben: 2017-03-23 09:08:14
Original
2565 Leute haben es durchsucht

Wenn Sie HTML-Code zum Erstellen einer Webseite verwenden und deklariert ist und ein Div im Code eine Höhe von 100 % hat, kann es zu einer abnormalen Anzeige kommen. Zum Beispiel der folgende Code:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {margin:0px;padding:0px;}
            div {
                background-color:red;
                width:200px;
                height:100%;
                }
    </style>
</head>
<body>
            <div></div>
</body>
</html>
Nach dem Login kopieren

Das angezeigte Ergebnis ist: Nichts! Warum?

Der Grund dafür ist, dass der HTML5-Standard dies erfordert, wenn die Höhe oder Breite auf einen Prozentsatz eingestellt ist , das übergeordnete Tag wird referenziert. Wenn Sie diesen Satz verstehen, lässt sich das Problem leichter lösen. Das übergeordnete Tag des ist naiverweise der Meinung, dass die Höhe des nicht definiert, dass das

angezeigt wird. Fügen Sie einen Parameterkörper {height:100%;} in CSS hinzu, Vorschau, das Ergebnis ist: immer noch nichts

Warum? Obwohl die Höhe des -Tags auf 100 % eingestellt ist, ist das -Tag das -Tag und die Höhe dieses Tags muss ebenfalls definiert werden. Die letzten hinzuzufügenden Parameter sind also html, body {height:100%;}

Bitte beachten Sie, dass zwischen html und body ein Komma und kein Leerzeichen steht. Erklären Sie, dass es sich um einen Multi-Label-Selektor und nicht um einen abgeleiteten Selektor handelt.

Das obige ist der detaillierte Inhalt von Lösung für das Problem der Div-Höhe 100 % unter Deklaration. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage