简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  So manipulieren Sie height:100%; in CSS, damit es funktioniert

So manipulieren Sie height:100%; in CSS, damit es funktioniert

巴扎黑
巴扎黑Original
2017-06-28 10:02:101563Durchsuche

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.

Warum funktioniert height:100% dann nicht?

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 6c04bd5ca3fcae76e30b72ad730ca86d und 100db36a723c770d327fc0aef2ce13b1. Damit die prozentuale Höhe Ihres p funktioniert, müssen Sie die Höhe von 6c04bd5ca3fcae76e30b72ad730ca86d und 100db36a723c770d327fc0aef2ce13b1 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%;.

Einige Dinge müssen Sie bei der Verwendung von 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!

Stellungnahme：
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
Vorheriger Artikel：Der Unterschied zwischen Höhe und Zeilenhöhe in CSSNächster Artikel：Der Unterschied zwischen Höhe und Zeilenhöhe in CSS

In Verbindung stehende Artikel

Mehr sehen