CSS min-height hauteur minimale max-height hauteur maximale

Pourquoi utilisons-nous les attributs de style min-height et max-height ?

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, c'est le cas. nécessaire de limiter la hauteur maximale de l'image via css max-height of.

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

css max-width

1 Syntaxe et structure

1. et max-height sont des nombres + unité html

min-height:50px minimum height 50px

max-height:50px maximum height 50px

structure d'utilisation CSS

div{ min-height:50px >

div{max-height:50px >

2. Cas d'utilisation de hauteur maximale et minimale

Nous définissons deux objets. boîtes avec une hauteur minimale (min -height:) et une limite de hauteur maximale (max-height) 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. même.

1. Code CSS correspondant

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

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

.divcss5-max{ max-height:60px;

margin-top

:10px}

2. Extrait de code source HTML du cas :

La hauteur minimale est de 60 px

La hauteur maximale est de 60px

3. Capture d'écran du cas de hauteur maximale et minimale

css hauteur maximale hauteur minimale Capture d'écran du cas

Capture d'écran du cas de style hauteur minimale et maximale CSS div

4. Nous augmentons le contenu des deux objets

Code HTML :

La hauteur minimale est de 60 px

DIVCSS5 Ajouter du contenu
contenu

divcss5 contenu ajouté

La hauteur maximale est de 60 px

www.divcss5.com

Ajouter du contenu

divcss5 ajouter du contenu

Ajouter du contenu

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

5 . Captures d'écran d'expérimentation

Captures d'écran du boîtier min-height max-height dans le navigateur

Captures d'écran du test du navigateur min-height et css max-height

Conseils, si vous nommez le. css ici ".divcss5-max" est ajouté au style

overflow

:hidden pour masquer la hauteur maximale et afficher le contenu du débordement.

Capture d'écran de la solution CSS au cas de bug de style hauteur maximale

Cas DIV+CSS pour résoudre la compatibilité hauteur maximale-hauteur maximale

Explication du cas DIVCSS5

Nous avons mis en place deux 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 pour le moment. l'objet affichera la valeur limite de hauteur minimale. Si le contenu est supérieur, il dépasse la hauteur minimale qui peut être passée et l'objet augmentera automatiquement en hauteur à ce moment. 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.

3. Résumé de la hauteur maximale et minimale de la hauteur maximale

Les styles de hauteur maximale et minimale sont très pratiques à utiliser et répondent aux inconvénients de la hauteur fixe. Cependant, IE6 ne le fait pas. le prennent en charge maintenant. Les navigateurs IE7 et supérieurs et les autres navigateurs le prennent en charge. Dans le prochain article, nous présenterons la compatibilité avec la hauteur minimale ie6 et la compatibilité avec la hauteur maximale ie6.

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!