Was passiert, wenn die Höhe der Seite oder der Prozentsatz des Div ungültig ist?

1. Haben Sie jemals gesagt, dass Sie möchten, dass die Höhe der Seite oder der Prozentsatz des Div ungültig ist? Ich glaube, Sie haben auch danach gesucht, was bedeutet, dass Sie den Prozentsatz vom Vater zum Vorfahren festlegen müssen html, um eine Wirkung zu erzielen.

Mit einem Wort: Wenn Sie seine Höhe mit einem Prozentsatz festlegen möchten, dann hat mindestens eines seiner übergeordneten Elemente eine feste Höhe, andernfalls erreichen alle übergeordneten Elemente das Vorfahren-HTML (da das Äußere von HTML das ist). Browser, es hat eine Höhe) muss den Prozentsatz festlegen. Natürlich müssen wir die Divs ausschließen, die sich außerhalb des Dokumentflusses befinden, wie z. B. position:absolute,fixed. Es kann davon ausgegangen werden, dass ihr übergeordnetes Element der Browser ist, sodass der Höhenprozentsatz immer gültig ist, da dies die Höhe des Browsers kann erreicht werden.

2. Manchmal muss der Prozentsatz nicht direkt verwendet werden. In diesem Fall können Sie height: calc(100% - 1rem) verwenden. 50% - 2px); Warten Sie, die gültigen Bedingungen für diese Situation müssen auch im ersten Punkt erläutert werden, da auch der Höhenprozentsatz verwendet wird.

Unter den heutigen Anforderungen an ein reaktionsfähiges Layout können viele Elemente, die ihre Größe automatisch anpassen können, höhen- und breitenadaptiv sein, wie z. B. img, das {width:50%;height:auto;} verwendet, um zu erkennen, dass die Die Bildhöhe folgt der Skalierungsanpassung.

Das am häufigsten verwendete Tag, Div, kann jedoch nicht automatisch angepasst werden (entweder vom übergeordneten Element geerbt oder durch eigene Angabe von px oder Angabe eines Prozentsatzes! Dieser Prozentsatz wird jedoch basierend auf der Größe des übergeordneten Elements berechnet ) basiert es überhaupt nicht auf der Breite des Elements selbst, sodass die Breite und Höhe des Div kein bestimmtes Verhältnis erreichen können =-=).

Um diese Funktion zu erreichen (Div-Höhe: Breite = 1:1), haben wir durch verschiedene Buffs gelernt, dass es die folgenden Verarbeitungsmethoden gibt:

1: Geben Sie direkt die Breite des Div High an + Zoomen, um ein adaptives

div{width:50px;heigth:50px;zoom:1.1;}

Dadurch kann ein vorläufiges Div mit gleicher Breite und Höhe erreicht werden, aber die Einschränkungen sind zu groß. PASSIEREN!

2, bestimmen Sie dynamisch die Breite des Div durch js, um die Höhe festzulegen

div{width:50%;}

window.onresize = function(){div .height( div.width);}

kann auch Divs mit gleicher Breite und Höhe erreichen, aber es fühlt sich immer etwas umständlich an, PASS!

3, festgelegt durch Breiten- und Höheneinheiten

div{width:20vw;height:20vw;/*20vw ist 20 % der Breite des Ansichtsfensters*/}

Aber Es gibt viele Das Gerät unterstützt dieses Attribut nicht, die Kompatibilität ist zu schlecht, PASS!

4, gesetzt durch Float

#aa{background:#aaa;;}
#bb{background:#ddd;;float:left}
#cc{ Hintergrund :#eee;;float:right}

Das obige ist der detaillierte Inhalt vonWas passiert, wenn die Höhe der Seite oder der Prozentsatz des Div ungültig ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!