Les pages Web avec une disposition de fluide ou de largeur liquide utilisent toute la largeur du navigateur. En effet, une ou plusieurs colonnes doivent être automatiquement redimensionnées pour adapter la taille de la fenêtre du navigateur. Ainsi, la disposition du fluide est plus conviviale car elle s'adapte à la taille de l'écran du spectateur. Plus précisément, pour faire une disposition de largeur de fluide, la largeur de l'élément doit être spécifiée dans «pourcentage".

Ce blog vous guidera sur la création d'une disposition de largeur fixe avec CSS.

Comment créer une disposition de largeur de liquide à l'aide de CSS?

Dans HTML, ajoutez d'abord un élément div avec un nom de classe "largeur fluide". Puis ajouter

et

Éléments pour ajouter du contenu.

Html

Bienvenue à Linuxhint

Linuxhint est le meilleur site Web de tutoriel en ligne. Si vous voulez apprendre la programmation bash, vous êtes au bon endroit.

L'ajout du code ci-dessus au fichier HTML affichera la sortie suivante:

La structure de la page a été achevée. Maintenant, dans la section suivante, les éléments HTML seront appelés à l'aide de plusieurs propriétés CSS.

Style tous les éléments

*
marge: 0px;
rembourrage: 0px;

Tous les éléments HTML spécifiés dans le fichier auront une marge de 0px et un rembourrage de 0px.

DIV DE LA VIEUX DE FLUIDE STYLE

.largeur fluide
Color en arrière-plan: RVB (238, 238, 238);
Largeur: 90%;
marge: auto;
Hauteur: 100VH;

Ce qui suit est la description des propriétés qui sont appliquées à la largeur du fluide div:

• ".largeur fluide"Est utilisé pour accéder à la classe de fluide de classe. Ici le " . "Le signe est connu comme un sélecteur de classe.
• "Couleur de l'arrière plan»La propriété détermine la couleur d'arrière-plan de l'élément.
• "largeur»La propriété spécifie la largeur de l'élément.
• "marge»La propriété ajoute de l'espace autour des éléments.
• "hauteur»La propriété définit la hauteur de l'élément.

En fournissant le code susmentionné, la sortie apparaîtra comme suit:

On peut voir que la taille de la div de largeur de fluide est ajustée en fonction de la taille de l'écran. Cela signifie que les éléments spécifiés en pourcentages définiront leur largeur en fonction de la résolution d'écran.

C'est ainsi que nous pouvons créer une disposition de largeur de fluide dans CSS.

Conclusion

Les développeurs doivent être très prudents lors de la conception de n'importe quelle application. Ils doivent garder à l'esprit comment ils veulent que leur application apparaisse sur différents appareils. Une telle chose est de définir la disposition de la page Web. De plus, pour rendre une disposition conviviale et réactive, le «pourcentage»L'unité doit être utilisée. Ce blog a expliqué avec succès comment créer une disposition de largeur fluide dans CSS avec un exemple.