communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > Comment puis-je créer une hauteur de division à 100 % sans supprimer le DOCTYPE ?

Comment puis-je créer une hauteur de division à 100 % sans supprimer le DOCTYPE ?

DDD
Libérer： 2024-12-29 15:15:15
original
1050 Les gens l'ont consulté

How Can I Make a Div 100% Height Without Removing the DOCTYPE?

Propriété de hauteur CSS, valeurs en pourcentage et DOCTYPE

Comment faire en sorte qu'un div remplisse la page avec une hauteur de 100 % sans la supprimer le DOCTYPE ?

Solution :

Déclarer une hauteur sur l'élément racine :

html { height: 100%; }
Copier après la connexion

Pourquoi supprimer le DOCTYPE le fait fonctionner ?

En mode standards, un pourcentage de hauteur pour un élément enfant sans hauteur définie est traité comme automatique. En mode bizarreries, cependant, le pourcentage de hauteur est mesuré par rapport à la fenêtre d'affichage. Par conséquent, la suppression du DOCTYPE force le navigateur en mode bizarreries, permettant au div de remplir la page avec une hauteur de 100 %.

Cependant, le mode bizarreries est imprévisible et peu fiable. Incluez toujours un DOCTYPE pour rendre le document en mode standards en utilisant :

<!DOCTYPE html>
Copier après la connexion

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!

Article précédent：Comment puis-je détecter le débordement d’éléments à l’aide de JavaScript ? Article suivant：Comment puis-je créer du texte transparent sur une image d’arrière-plan à l’aide du masquage SVG ?
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2980
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
3193
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
2598
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
2562
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
2591
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal