Maison  >  Article  >  interface Web  >  Comment définir la hauteur du div avec CSS

Comment définir la hauteur du div avec CSS

王林
王林original
2021-03-10 16:35:184476parcourir

Comment définir la hauteur d'un div avec CSS : ajoutez d'abord l'attribut style à la balise div ; puis ajoutez l'attribut height à l'attribut style et indiquez la hauteur fixe, telle que [style="height : 300px;" 】.

Comment définir la hauteur du div avec CSS

L'environnement d'exploitation de cet article : système Windows 10, CSS 3, ordinateur thinkpad t480.

Nous pouvons utiliser les trois méthodes suivantes pour définir la hauteur du div :

1. Spécifiez directement la hauteur fixe dans le style

2. >

3. Hauteur adaptative

La première méthode : méthode de hauteur fixe.

La façon d'écrire une hauteur fixe consiste à ajouter l'attribut style dans la balise div et à écrire la hauteur fixe dans l'attribut height dans l'attribut, tel que style="height:300px;"

Comment définir la hauteur du div avec CSS

La deuxième méthode : appeler sous forme de classe.

Pour appeler sous forme de classe, vous devez écrire le style CSS dans la balise style sous la balise head, puis l'appeler sous forme de classe dans le div.

Comment définir la hauteur du div avec CSS

(Partage vidéo d'apprentissage :

tutoriel vidéo CSS)

La troisième méthode : l'écriture adaptative en hauteur.

La hauteur dite adaptative est la hauteur par rapport à l'étiquette parent ou au conteneur parent, écrite sous forme de pourcentage, qui changera de manière adaptative à mesure que la hauteur du conteneur parent change.

Comment définir la hauteur du div avec CSS

Un résultat d'exécution de la méthode adaptative. On peut voir que la boîte en pointillés bleus est partiellement exposée à l'extérieur de la boîte solide noire. En effet, la somme des hauteurs des deux div est supérieure à la hauteur du conteneur parent.

Comment définir la hauteur du div avec CSS

Après avoir modifié le rapport de hauteur adaptatif, veuillez consulter le rendu ci-dessous.

Ici, j'ai changé la proportion relative de la hauteur à 70%.

Comment définir la hauteur du div avec CSS

Comment définir la hauteur du div avec CSS

Recommandations associées :

Tutoriel CSS

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn