CSS min-height minimale Höhe max-height maximale Höhe

Warum verwenden wir die Stilattribute min-height und max-height?

Erklärung, wo CSS-Mindesthöhe angewendet werden soll

Manchmal richten wir eine Objektbox ein, um zu verhindern, dass das Objekt geöffnet werden kann, wenn es keinen Inhalt hat, der Inhalt aber nicht bestimmt werden kann. Daher kann die Höhe nicht festgelegt werden. In diesem Fall benötigen Sie CSS, um die Mindesthöhe festzulegen, um die Objektbox anzuheben. Wenn der Inhalt klein ist, kann die Mindesthöhe den Inhalt anzeigen. Wenn der Inhalt größer als die Mindesthöhe ist, wird das Objekt mit zunehmendem Inhalt größer.

Css-Max-Höhe-Anwendungserklärung für maximale Höhe

Dieses Attribut wird selten verwendet, wahrscheinlich um zu viel Inhalt zu vermeiden, der die Höhe erhöht und die Verschönerung und Einheitlichkeit des Layouts beeinträchtigt , wir legen die maximale Höhenbegrenzung fest. Beispielsweise enthält ein Tabellen-TR-TD-Tabellenobjekt ein Bild, und die Höhe des Bildes ist ungewiss. Wenn es zu hoch ist und Sie nicht möchten, dass das Bild die TR-TD-Tabelle durchbricht, ist dies der Fall notwendig, um die maximale Höhe des Bildes durch CSS max-height zu begrenzen.

CSS-Verzeichnis für maximale und minimale Höhe

Syntax und Struktur

Anwendungsfälle für maximale und minimale Höhe

Zusammenfassung der maximalen und minimalen Höhe der maximalen und minimalen Höhe

css max-width

1. Syntax und Struktur

1. Die Werte von min-height und max-height sind Zahlen + HTML-Einheit

min-height:50px minimale Höhe 50px

max-height:50px maximale Höhe 50px

2. CSS-Nutzungsstruktur

div{ min-height:50px }

div{max-height:50px }

2. Anwendungsbeispiele für maximale und minimale Höhe

Wir legen zwei Objekte fest Boxen mit einer minimalen Höhe (min-height:) und einer maximalen Höhe (max-height) Um die Beobachtung des Anwendungsfalleffekts zu erleichtern, legen wir die CSS-Breite und den CSS-Rahmenstil der beiden Boxen fest Dasselbe.

1. Entsprechender CSS-Code

.divcss5-min,.divcss5-max{ width:300px; border:1px solid #F00}

.divcss5-min{ min -height:60px}

.divcss5-max{

margin-top

:10px} 2. Fall-HTML-Quellcode-Snippet:

Mindesthöhe beträgt 60 Pixel

Die maximale Höhe beträgt 60 Pixel

3. Screenshot des Falles der maximalen und minimalen Höhe

css maximale Höhe minimale Höhe Fall-Screenshot

Css div minimale und maximale Höhe Fall-Screenshot

4. Wir erhöhen den Inhalt der beiden Objekte

Html-Code:

Mindesthöhe ist 60px

DIVCSS5 Inhalt hinzufügen

Hinzufügen Inhalt

divcss5 hinzugefügter Inhalt

Die maximale Höhe beträgt 60px

www.divcss5.com

Inhalt hinzufügen
/> ;

Inhalt hinzufügen

Hier erhöhen wir den Inhalt in den beiden Objektfeldern über die 60px-Höhenbeschränkung hinaus

5 . Experiment-Screenshots

Screenshots von Min-Height-Max-Height-Gehäuse im Browser

Screenshots von Browser-Test Min-Height und CSS-Max-Höhe

Tipps, falls Sie das nennen CSS hier Fügen Sie den Stil

overflow

:hidden zu „.divcss5-max“ hinzu, um die maximale Höhe auszublenden und den Überlaufinhalt anzuzeigen.

Screenshot der CSS-Lösung für den Fehlerfall mit maximaler Höhe

DIV+CSS-Fall zur Lösung der Kompatibilität mit maximaler Höhe und maximaler Höhe

6. DIVCSS5-Fallerklärung Wir richten zwei Felder ein, eines mit einer Mindesthöhenbegrenzung und eines mit einer Höchsthöhenbegrenzung. Wenn das Objekt mit der Mindesthöhenbegrenzung nicht viel Inhalt hat, wird es die Mindesthöhenbegrenzung zu diesem Zeitpunkt nicht überschreiten. Das Objekt zeigt den Mindesthöhengrenzwert an. Wenn der Inhalt größer ist, überschreitet er die Mindesthöhe, die platziert werden kann, und das Objekt wird zu diesem Zeitpunkt automatisch größer. Letzteres hat eine maximale Höhenbeschränkung von max-height. Wenn der Inhalt klein ist, gibt es keinen Unterschied. Wenn jedoch viel Inhalt vorhanden ist und die maximale Höhenbeschränkung nicht berücksichtigt werden kann, überschreitet der Inhalt die maximale Höhenbeschränkung , aber das Objekt selbst hat immer noch die maximale Höhe, sodass der Inhalt angezeigt wird. Wenn der Überlauf das Objektfeld überschreitet, können wir den Überlaufinhalt mithilfe der CSS-Überlaufeigenschaft ausblenden.

3. Zusammenfassung der maximalen und minimalen Höhe der maximalen Höhe

Die maximalen und minimalen Höhenstile sind sehr praktisch und decken die Nachteile der festen Höhe ab Unterstützen Sie es jetzt. IE7 und höher und andere Browser unterstützen es. Im nächsten Artikel stellen wir die Kompatibilität mit IE6 Min-Height und IE6 Max-Height vor.

Das obige ist der detaillierte Inhalt vonCSS min-height minimale Höhe max-height maximale Höhe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!