Maison  >  Article  >  interface Web  >  Solution au problème de hauteur div 100% sous déclaration

Solution au problème de hauteur div 100% sous déclaration

高洛峰
高洛峰original
2017-03-23 09:08:142563parcourir

Lors de l'utilisation de code HTML pour créer une page Web, si 8b05045a5be5764f313ed5b9168a17e6 est déclaré et qu'un div dans le code a une hauteur définie sur 100 %, un affichage anormal peut se produire. Par exemple, le code suivant :

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {margin:0px;padding:0px;}
            div {
                background-color:red;
                width:200px;
                height:100%;
                }
    </style>
</head>
<body>
            <div></div>
</body>
</html>

Le résultat affiché est : rien Pourquoi ?

La raison est que la norme HTML5 l'exige lorsque la hauteur ou la largeur est définie sur un pourcentage. , la balise parent est référencée . Si vous comprenez cette phrase, le problème sera plus facile à résoudre. La balise parent de la balise dc6dce4a544fdca2df29d5ac0ea9906b est 6c04bd5ca3fcae76e30b72ad730ca86d. Nous pensons naïvement que la hauteur de la balise 6c04bd5ca3fcae76e30b72ad730ca86d pas défini, le dc6dce4a544fdca2df29d5ac0ea9906b est affiché. Ajoutez un paramètre body {height:100%;} en css, aperçu, le résultat est : toujours rien

Pourquoi ? Bien que la hauteur de la balise 6c04bd5ca3fcae76e30b72ad730ca86d soit définie sur 100 %, la balise 6c04bd5ca3fcae76e30b72ad730ca86d est la balise 100db36a723c770d327fc0aef2ce13b1 et la hauteur de cette balise doit également être définie. Les paramètres finaux à ajouter sont donc html, body {height:100%;}

Veuillez noter qu'il y a une virgule entre html et body, pas un espace. Expliquez qu'il s'agit d'un sélecteur multi-étiquettes et non d'un sélecteur dérivé.

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!

Déclaration:
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
Article précédent:Comment utiliser document.bodyArticle suivant:Comment utiliser document.body