Comment utiliser la hauteur minimale et la hauteur maximale en CSS

Les styles de hauteur maximale et minimale sont très pratiques à utiliser et répondent aux inconvénients de la hauteur fixe. Cet article vous présentera comment utiliser hauteur minimale et hauteur maximale. en CSS.

Explication de l'endroit où appliquer Css min-height

Nous mettons parfois en place une boîte d'objet pour empêcher l'objet de pouvoir s'ouvrir lorsqu'il n'a pas de contenu, mais que le contenu ne peut pas être déterminé, donc la hauteur ne peut pas être fixée. Dans ce cas, nous aurons besoin de CSS pour définir la hauteur minimale pour élever la boîte de l'objet. Lorsque le contenu est petit, la hauteur minimale peut afficher le contenu. Si le contenu est supérieur à la hauteur minimale, l'objet augmentera à mesure que le contenu augmente.

Explication de l'application Css max-height maximum height

Cet attribut est rarement utilisé, probablement pour éviter trop de contenu qui augmenterait la hauteur et affecterait l'embellissement et l'uniformité de la mise en page à l'heure actuelle. , nous fixons la limite de hauteur maximale . Par exemple, un objet table tr td contient une image, et la hauteur de l'image est incertaine. Si elle est trop haute et que vous ne voulez pas que l'image casse la table tr td, il est nécessaire de limiter la hauteur maximale. de l'image via CSS max-height.

Répertoire CSS des hauteurs maximale et minimale

Syntaxe et structure

Cas d'utilisation de la hauteur maximale et minimale

max-height min-height résumé de la hauteur maximale et minimale

Lecture étendue :

1. CSS masque le contenu de débordement

2. Masquer le contenu HTML

3. .css height

5. css

min-width

6.css

max-width

Syntaxe et structure

Les valeurs de min-height et max-height sont des nombres + unités html

Exp

Structure d'utilisation CSS

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

Maximum et cas d'utilisation de hauteur minimale

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

Nous définissons une limite de hauteur minimale (min-height:) et une limite de hauteur maximale (max-height) pour les deux boîtes d'objets Afin de faciliter l'observation de l'effet du cas d'application, nous définissons la largeur CSS et le style de bordure CSS des deux boîtes pour qu'ils soient identiques.

1. Code CSS correspondant

2. Fragment de code source html du cas :

.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>

Nous combinerons les deux Le contenu de l'objet augmente

Code HTML :

Ici, nous augmentons le contenu dans les deux zones d'objet au-delà de la limite de hauteur de 60 px

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

Conseils, si vous nommez le css ici Ajoutez le style

overflow

:hidden à ".div-max" pour masquer la hauteur maximale et afficher le contenu du débordement.

Nous avons mis en place 2 cases, une avec une limite de hauteur minimale et une avec une limite de hauteur maximale. Si l'objet avec la limite de hauteur minimale n'a pas beaucoup de contenu, il ne dépassera pas la limite de hauteur minimale. cette fois, l'objet affichera la valeur limite de hauteur minimale. Si le contenu Si la commande dépasse la limite de hauteur minimale, l'objet augmentera automatiquement en hauteur. Ce dernier a une limite de hauteur maximale de max-height. Lorsque le contenu est petit, il n'y aura aucune différence. Cependant, lorsqu'il y a beaucoup de contenu et que la limite de hauteur maximale ne peut pas être respectée, le contenu dépassera la limite de hauteur maximale. , mais l'objet lui-même a toujours la hauteur maximale, donc le contenu apparaîtra Si le débordement dépasse la zone de l'objet, nous pouvons utiliser la propriété CSS overflow pour masquer le contenu du débordement.

Il existe de nombreuses façons d'utiliser min-height et max-height. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment saisir des caractères d'espacement en HTML

Comment définir la hauteur et l'espacement des lignes de paragraphe en HTML

Comment savoir si le navigateur prend en charge html5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!