<!DOCTYPE html> Solution au problème de hauteur div 100% sous déclaration-tutoriel HTML-php.cn

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

高洛峰

Libérer： 2017-03-23 09:08:14

original

2564 Les gens l'ont consulté

Lors de l'utilisation de code HTML pour créer une page Web, si 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>

Copier après la connexion

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

est . Nous pensons naïvement que la hauteur de la balise pas défini, le

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 soit définie sur 100 %, la balise est la balise 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!

Étiquettes associées：

html

source：php.cn

Article précédent：Comment utiliser document.body Article suivant：Les bases du Web : utilisation de html|css

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