Wenn Sie die Höhe eines Seitenelements auf 100 % festlegen, gehen Sie davon aus, dass das Element die gesamte Höhe des Browserfensters ausfüllt. In den meisten Fällen hat dieser Ansatz jedoch keine Auswirkung. Wissen Sie, warum height:100% nicht funktioniert?
Wenn wir das CSS-Attribut „Höhe“ verwenden, um die Höhe eines Elements zu definieren, sollte dieses Element laut gesundem Menschenverstand den entsprechenden Abstand im vertikalen Raum des Browsers wie festgelegt erweitern. Wenn das CSS eines p-Elements beispielsweise height:
100px; ist, sollte es im vertikalen Bereich der Seite eine volle Höhe von 100 Pixeln einnehmen.
Gemäß den W3C-Spezifikationen muss die prozentuale Höhe basierend auf der Höhe des übergeordneten Elementcontainers dieses Elements festgelegt werden. Wenn Sie also die Höhe eines p auf height:
50%; setzen und die Höhe seines übergeordneten Elements 100 Pixel beträgt, sollte die Höhe dieses p 50 Pixel betragen.
Beim Entwerfen einer Seite platzieren Sie ein p-Element und möchten, dass es die gesamte Fensterhöhe einnimmt Wenn Sie es tun, fügen Sie diesem p das CSS-Attribut height:
100%; hinzu. Wenn Sie jedoch die Breite auf <a href="http://www.php.cn/wiki/835.html" target="_blank">width</a>:
100%; einstellen, wird die Breite des Elements sofort auf die gesamte horizontale Breite des Fensters erweitert. Passiert das Gleiche auch mit der Höhe?
Falsch.
Um zu verstehen, warum nicht, müssen Sie verstehen, wie Browser Höhe und Breite berechnen. Webbrowser berücksichtigen bei der Berechnung der effektiven Breite die geöffnete Breite des Browserfensters. Wenn Sie keinen Standardwert für die Breite festlegen, kachelt der Browser den Seiteninhalt automatisch so, dass er die gesamte horizontale Breite ausfüllt.
Aber die Berechnungsmethode der Höhe ist völlig anders. Tatsächlich berechnet der Browser die Höhe des Inhalts überhaupt nicht, es sei denn, der Inhalt überschreitet den Bereich des Ansichtsfensters (was dazu führt, dass 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 und die Höhe der Seite muss überhaupt nicht berücksichtigt werden.
Da die Seite keinen Standardhöhenwert hat, können Sie beim Festlegen der Höhe eines Elements auf eine prozentuale Höhe nicht die Höhe des übergeordneten Elements ermitteln und daher Ihre eigene Höhe nicht berechnen. Mit anderen Worten, die Höhe des übergeordneten Elements ist nur ein Standardwert: height:
auto;. Wenn Sie den Browser auffordern, die prozentuale Höhe basierend auf einem solchen Standardwert zu berechnen, erhalten Sie nur das Ergebnis undefined. Das heißt, ein null-Wert, und der Browser reagiert in keiner Weise auf diesen Wert.
Das obige Demonstrationsbeispiel zeigt, dass das übergeordnete Element keine feste Höhe festlegt, sodass die Höhe des untergeordneten Elements height:
100% nicht funktioniert entweder. Sie können anhand der Hintergrundfarbe des übergeordneten Elements beurteilen, dass die Höhe des untergeordneten Elements nicht 100% ist.
Wenn Sie also möchten, dass die prozentuale Höhe eines Elements height:
100%; funktioniert, müssen Sie einen gültigen Wert für die Höhe aller übergeordneten Elemente dieses Elements festlegen. Mit anderen Worten, Sie müssen Folgendes tun:
<html>
<body>
<p style="height: 100%;">
<p>
想让这个p高度为 100% 。 </p>
</p>
</body></html>Jetzt haben Sie diesem p eine Höhe von 100 % gegeben und es hat zwei übergeordnete Elemente <body> und <html>. Damit die prozentuale Höhe Ihres p funktioniert, müssen Sie die Höhe von <body> und <html> festlegen.
<html style="height: 100%;">
<body style="height: 100%;">
<p style="height: 100%;">
<p>
这样这个p的高度就会100%了 </p>
</p>
</body></html>Wie Sie dieser Demo entnehmen können, funktioniert height:
100%;.
height:
100%;
1 beachten. Ränder und Abstände führen dazu, dass auf Ihrer Seite Bildlaufleisten angezeigt werden, was möglicherweise nicht Ihren Wünschen entspricht.
2. Wenn die tatsächliche Höhe Ihres Elements größer ist als die von Ihnen festgelegte prozentuale Höhe, wird die Höhe des Elements automatisch erweitert.
Das obige ist der detaillierte Inhalt vonSo manipulieren Sie height:100%; in CSS, damit es funktioniert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
