Heim > Web-Frontend > HTML-Tutorial > Was ist der Unterschied zwischen height:100 % und height:auto?

Was ist der Unterschied zwischen height:100 % und height:auto?

零下一度
Freigeben: 2017-06-30 16:29:43
Original
16789 Leute haben es durchsucht

Ich habe den Unterschied zwischen height:100% und height:auto nie verstanden. Kürzlich habe ich height:100%;overflow:hidden verwendet, aber einige Browser haben es unerklärlich und wunderbar gemacht Aber ändern Sie es einfach in height:auto. Baidu hat sich nie im Detail mit diesem Problem befasst.

Nach einem genaueren Blick auf Baidu und den Ratschlägen von Freunden in der Gruppe habe ich endlich den Grund verstanden und es aufgezeichnet.

height:auto bezieht sich auf die automatische Anpassung der Höhe entsprechend dem Inhalt im Block.
height:100% bezieht sich auf die definierte Höhe relativ zur Höhe des übergeordneten Blocks, d. h. die Höhe wird entsprechend der Höhe der übergeordneten Ebene definiert, die ihm am nächsten liegt, und mit einer definierten Höhe.

wird automatisch entsprechend der Höhe des Inhalts erweitert. 100 % werden anhand der Höhe des übergeordneten Elements ermittelt. Zum Beispiel:

<div style="height:100px;width:200px;">      <div style="height:auto;width:100px;float:left;">
这个容器的高度是随里面的内容的高度而定
</div>
Nach dem Login kopieren
<div style="height:100%;width:100px;float:right;">这个容器的高度为父级的高度,100px</div> </div>
Nach dem Login kopieren

Wenn sich beispielsweise eine Tabelle in einer anderen Tabelle befindet, wenn die Höhe der äußeren Tabelle 100 beträgt und die innere Tabelle automatisch ist, wenn sich nichts in der Tabelle befindet, Es hat keine Höhe. Die Höhe des Inhalts in der Tabelle ist so hoch wie sie ist, unabhängig davon, ob Inhalt darin vorhanden ist oder nicht

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen height:100 % und height:auto?. 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