简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Questions et réponses  >  le corps du texte

Pourquoi la hauteur 100% fonctionne-t-elle sans déclaration DOCTYPE ?

Voici le code complet : 

<!DOCTYPE HTML>
<html>
<body style="height: 100%; padding: 0; margin: 0;">
    <div style="background-color: green; height: 100%; width: 100%"></div>
</body>
</html>

Rien n'apparaît. Cependant, si je supprime la première ligne (doctype), toutes les pages deviennent vertes comme prévu.

J'ai deux questions :

  1. Comment faire en sorte que div remplisse la page sans supprimer le balisage ?
  2. Pourquoi ça marche normalement si je supprime doctype ?


P粉818561682P粉818561682329 Il y a quelques jours579

répondre à tous(2)je répondrai

  • P粉043432210

    P粉0434322102023-10-27 00:47:01

    Voulez-vous dire vertical ? Les divs sont des éléments de niveau bloc, donc par défaut ils remplissent l'élément parent horizontalement.

    Pour que cela fonctionne correctement, vous devez également définir la hauteur de la balise HTML à 100 %. 

    html, body { height:100%; }

    Voir un exemple de travail ici :

    http://jsfiddle.net/uhg0y9tm/1/

    Comme d'autres l'ont dit ici, une fois que vous supprimez la première ligne (type de document HTML5), les navigateurs afficheront la page différemment, auquel cas il n'est pas nécessaire de spécifier une hauteur explicite de 100 % pour la balise HTML.

    répondre
    0
  • P粉904405941

    P粉9044059412023-10-27 00:30:23

    CSS height Propriétés, valeurs en pourcentage et DOCTYPE

    La première partie de votre question divdemande comment appliquer une hauteur de 100 % à votre

    , à laquelle d'autres ont répondu à plusieurs reprises. Essentiellement, déclarer la hauteur de l'élément racine : 

    html { height: 100%; }

    L'explication complète peut être trouvée ici :

    La deuxième partie

    de votre question a reçu beaucoup moins d'attention. Je vais essayer de répondre à cette question.

    Lorsque vous supprimez le DOCTYPE (Déclaration de type de document), le navigateur passe du Mode standard au Mode étrange

    .

    En Weird Mode, également connu sous le nom de Compatibility Mode, le navigateur émule les anciens navigateurs afin de pouvoir analyser les anciennes pages Web - des pages écrites avant l'existence des normes Web. Le navigateur en mode bizarre se fait passer pour IE4, IE5 et Navigator 4

    afin de pouvoir restituer l'ancien code comme l'auteur l'avait prévu.

    Voici comment Wikipedia

    définit le mode bizarreries :

    Voici l'avis de MDN

     :

    height: 100%Maintenant, voici les raisons spécifiques pour lesquelles dans votre code fonctionne en mode bizarre mais pas en mode standard : < /p>

    En mode standards高度: auto （没有定义高度），那么子元素的百分比高度也将被视为 height: auto, si l'élément parent a (selon les spécifications

    ).

    html { height: 100%; }C'est pourquoi la réponse à votre première question est

    .

    height: 100% 在 div 中工作，您必须在父元素上设置 heightPour que fonctionne au sein de , vous devez définir

    sur l'élément parent (

    plus de détailsheight: auto). Cependant, en mode bizarre, si l'élément parent a

    , le pourcentage de hauteur de l'élément enfant sera

    mesuré par rapport à la fenêtre d'affichage

    . 🎜 🎜Voici trois références couvrant ce comportement : 🎜

    TL;DR

    En un mot, voici ce que les développeurs doivent savoir :

    répondre
    1
  • Annulerrépondre