Pourquoi la hauteur du top 100% ne fonctionne-t-elle pas pour étendre les divs à la hauteur de l'écran?

Dans HTML, l'utilisateur peut créer un ou plusieurs conteneurs à l'aide de «" ou "" éléments. De plus, CSS permet à son utilisateur de modifier la largeur et la hauteur du conteneur en fonction de leurs besoins. Cependant, la hauteur: 100% ne fonctionne pas car cela dépend de l'élément parent. Pour ce faire, définissez d'abord la hauteur de l'élément parent, puis définissez la hauteur du div.

Cet article expliquera la hauteur: 100% pour l'élargissement des Divs à la hauteur complète.

Pourquoi la hauteur ne fonctionne-t-elle pas à 100% pour étendre les divs à la hauteur de l'écran?

Si les utilisateurs souhaitent utiliser la règle de style "Hauteur: 100%"Pour faire d'un conteneur Div en pleine hauteur de l'écran, cela ne fonctionne tout simplement pas car le pourcentage (%) est une unité relative, ce qui signifie que la hauteur finale dépendra de la hauteur de l'élément parent.

Pour utiliser un numéro de pourcentage pour la hauteur, la hauteur du parent doit également être déterminée. La seule option est l'élément parent / racine "», Qui permet une hauteur en pourcentage pour étendre les divs en plein écran.

Comment régler la hauteur: 100% pour l'expansion des divs en plein écran?

Mettre en place "Hauteur: 100%”Fonctionne pour étendre les divs à la hauteur de l'écran, essayez les instructions déclarées.

Étape 1: Créez un conteneur «div»

Initialement, créez un conteneur Div à l'aide du «”Element et insérer un attribut de classe pour identifier le conteneur particulier à l'aide du nom de classe. Ensuite, intégrez du texte entre la balise:

Linuxhint Ltd UK

On peut voir que le conteneur Div a été créé avec succès:

Étape 2: Définir «Hauteur: 100%

Pour étendre la div à la hauteur de l'écran, accédez à la page et au corps HTML directement par son nom "html", et "corps". Aussi, accédez au conteneur div en utilisant le nom de classe avec sélecteur de points comme «.pleine hauteur»:

HTML, corps, .pleine hauteur
hauteur: 100%;
mine-hauteur: 100% !important;

Ici:

• "hauteur»La propriété définit la hauteur de l'élément accessible. Dans ce cas, la hauteur est définie comme «100%".
• Ensuite, définissez le "mine" comme "100%»Et appliquez la règle importante sur cette propriété.
• Le "!important"La règle est utilisée pour définir plus d'importance à une propriété ou une valeur que sa valeur normale.

Étape 3: Style le conteneur «div»

Utilisé le nom et le sélecteur de classe comme «.pleine hauteur”Pour accéder au conteneur Div et appliquer les propriétés CSS indiquées ci-dessous:

.pleine hauteur
Largeur: 500px;
Contexte: RVB (154, 208, 240);
Texte-aligne: Centre;
Caractères gras;
Style de police: italique;

Selon l'extrait de code donné:

• "largeur"Est utilisé pour spécifier la largeur de l'élément.
• "arrière-plan»Détermine la couleur de l'arrière de l'élément.
• "alignement de texte»La propriété est utilisée pour définir l'alignement du texte.
• "Police de caractère”Est ​​utilisé pour spécifier la police particulière du texte.
• "le style de police»Détermine le style du texte. Pour ce faire, la valeur de cette propriété est définie comme «italique".

Sortir

Il s'agit de régler la hauteur: 100% pour travailler pour améliorer les divs en plein écran.

Conclusion

Pour utiliser un numéro de pourcentage pour la hauteur, la hauteur du parent doit également être déterminée. La seule exception est l'élément racine "», Qui permet un pourcentage de hauteur pour étendre les divs en plein écran. Pour ce faire, accédez aux éléments HTML, corps et div et définissez le «hauteur" comme "100%" et "mine" aussi "100%". Ce tutoriel a expliqué la hauteur: 100% fonctionne pour étendre le div au plein écran.