So erstellen Sie DIV mit adaptiver Höhe

Wenn wir das Projekt abgeschlossen haben, werden wir alle auf die Wirkung der adaptiven DIV-Höhe stoßen. Deshalb zeigen wir Ihnen heute, wie Sie die Wirkung der adaptiven DIV-Höhe in zwei Situationen erzielen können.

Der erste Typ: Die Höhe des DIV ist adaptiv, wenn der Inhalt um eine bestimmte Höhe erhöht wird, und der DIV hat eine bestimmte Mindesthöhe, wenn der Inhalt klein ist.

Der zweite Typ : Es gibt keine Mindesthöhe und der DIV ist in der Höhe vollständig anpassbar.

Im Folgenden werden diese beiden Situationen und Lösungen für Sie vorgestellt.

Es gibt eine bestimmte Mindesthöhe. Wenn der Inhalt klein ist, ist der DIV wird eine bestimmte Mindesthöhe haben – TOP

Es gibt eine DIV-Box mit einer Standardhöhe von 200 Pixeln. Wenn der Inhalt im DIV redundant ist und die begrenzte Höhe überschreitet, passt sich das DIV an die Höhe an DIV ist erforderlich, es ist kein JS erforderlich und es ist kompatibel mit

1. Antworten und Erklärungen:

_

height:200px; /* CSS-Hinweis: Nur IE6 legt dieses Attribut fest. Unter der Annahme, dass die Mindesthöhe 200 Pixel beträgt, stellen Sie die Höhe auf 200 Pixel ein. IE6 erhöht automatisch die eingestellte Höhe, nachdem der Inhalt */

überschreitet min-height:200px; /* cssHinweis: CSS-Mindesthöhe beträgt 200px. Unterstützt alle Browser, außer IE6 */

Diese Einstellung ist kompatibel mit ie6, 7, 8, 9, 10, Firefox usw.

2. Spezifischer Einstellungscode:

div{ 
_height:200px; 
min-height:200px 
/* css 注释：两个放置不分前后顺序，兼容所有浏览器 */ 
}

3. Fall der Koexistenz von CSS-Mindesthöhe und adaptiver Höhe

Wir haben eingerichtet Bei 2 DIV-Boxen beträgt die Mindesthöhe 200 Pixel. Wenn mehr Inhalt vorhanden ist, als in die Höhe passt, passt sich die DIV-Box an die Höhe an Beobachtung und Referenzanalyse setzen wir die Breite einheitlich auf 100 Pixel und einen schwarzen 1 Pixel großen CSS-Rahmen.

Der CSS-Code lautet wie folgt:

div{_height:200px; min-height:200px; border:1px solid #000; width:100px} 
/* css注释：设置最小高度，border边框，宽度 */ 
HTML代码片段：
<div>200高度能装下这点内容，设置最小高度200px</div> 
<div>设置最小高度200px<br /> 
而内容多，超出200px高度限制，DIV自适应高度<br /> 
<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位<br /> 
案例占位 
</div>

CSS-Standard-Adaptive-Höhe

Wenn wir keine feste Höhe für ein DIV oder keine CSS-Höhe festlegen Stil, sein DIV-Feld ist standardmäßig auf „Selbstanpassung an die Höhe“ eingestellt.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Inhalte finden Sie auf der chinesischen PHP-Website

andere verwandte Artikel!

Verwandte Lektüre:

Analyse der neuesten JS-Interviewfragen

Zusammenstellung gängiger Methoden nativer JS

Die neueste JS-Interviewfragenanalyse

Das obige ist der detaillierte Inhalt vonSo erstellen Sie DIV mit adaptiver Höhe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!