So verwenden Sie Min-Height und Max-Height in CSS

Die maximalen und minimalen Höhenstile sind sehr praktisch und beseitigen die Nachteile der festen Höhe. In diesem Artikel erfahren Sie, wie Sie Mindesthöhe und Maximalhöhe verwenden in CSS.

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, müssen Sie die maximale Höhe begrenzen des Bildes durch CSS max-height.

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

Erweiterte Lektüre:

1. CSS verbirgt Überlaufinhalte

2. HTML-Inhalte ausblenden

4 . CSS-Höhe

5. CSS

Mindestbreite

6. CSS

Maximale Breite

Syntax und Struktur

Die Werte von Min-Height und Max-Height sind Zahlen + HTML-Einheiten

Exp

CSS-Nutzungsstruktur

min-height:50px 最小高度50px
max-height:50px 最大高度50px

Maximum und Anwendungsfälle mit minimaler Höhe

div{min-height:50px }
div{max-height:50px }

Wir legen eine Mindesthöhe (Mindesthöhe:) und eine Maximalhöhe (Max-Höhe) für die beiden Objektfelder fest, um die Beobachtung des Anwendungsfalleffekts zu erleichtern. Wir stellen die CSS-Breite und den CSS-Rahmenstil der beiden Boxen auf den gleichen Wert ein.

1. Entsprechender CSS-Code

2. Fall-HTML-Quellcodefragment:

.div-min,.div-max{ width:300px; border:1px solid #F00} 
.div-min{ min-height:60px} 
.div-max{ max-height:60px; margin-top:10px}

<div class="div-min"> 
    最小高度为60px 
</div> 
<div class="div-max"> 
    最大高度为60px 
</div>

Wir werden das kombinieren zwei Objektinhalte werden vergrößert

Html-Code:

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

<div class="div-min"> 
    最小高度为60px<br /> 
   增加内容<br /> 
    增加内容<br /> 
    增加内容 
</div> 
<div class="div-max"> 
    最大高度为60px<br /> 
    www.php.cn<br /> 
    增加内容<br /> 
     增加内容<br /> 
    增加内容 
</div>

Tipps, wenn Sie das CSS benennen Fügen Sie hier den Stil

overflow

:hidden zu „.div-max“ hinzu, um die maximale Höhe auszublenden und den Überlaufinhalt anzuzeigen. Wir richten zwei Boxen ein, eine mit einer Mindesthöhenbegrenzung und eine mit einer Höchsthöhenbegrenzung. Wenn das Objekt mit der Mindesthöhenbegrenzung nicht viel Inhalt hat, wird es die Mindesthöhenbegrenzung nicht überschreiten Dieses Mal zeigt das Objekt den Mindesthöhengrenzwert an. Wenn der Inhalt den Mindesthöhengrenzwert überschreitet, erhöht sich die Höhe des Objekts automatisch. 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.

Es gibt so viele Möglichkeiten, Min-Height und Max-Height zu verwenden. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So geben Sie Leerzeichen in HTML ein

So legen Sie Absatzzeilenhöhe und Zeilenabstand in HTML fest

So erfahren Sie, ob der Browser HTML5 unterstützt

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Min-Height und Max-Height in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!