communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > tutoriel CSS > Comment puis-je définir la hauteur d'un div à 100 % tout en conservant un DOCTYPE ?

Comment puis-je définir la hauteur d'un div à 100 % tout en conservant un DOCTYPE ?

Barbara Streisand

Libérer： 2024-12-27 19:59:15

original

162 Les gens l'ont consulté

How Can I Set a Div's Height to 100% While Maintaining a DOCTYPE?

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

Réglage de la hauteur de la div à 100 %

Pour remplir la div avec une hauteur de 100 % sans supprimer le DOCTYPE, déclarez une hauteur sur l'élément racine :

html { height: 100%; }

Copier après la connexion

Mode Quirks et pourcentage de hauteurs

La suppression du DOCTYPE fait passer le navigateur du mode standards au mode bizarreries. En mode bizarreries, les hauteurs en pourcentage des éléments enfants sont mesurées par rapport à la fenêtre d'affichage si l'élément parent a height: auto. En mode standards, ils sont traités comme height: auto.

TL;DR

Incluez toujours un DOCTYPE pour restituer le document en mode standards. Utilisez le DOCTYPE suivant :

<!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!

source：php.cn

Article précédent：Comment puis-je créer une grille de carrés réactive avec un contenu centré à l'aide de CSS ? Article suivant：Comment puis-je donner aux éléments en ligne en HTML une largeur spécifique ?

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

2312

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

2448

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

2063

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...