Conseils pour le pourcentage de hauteur HTML 5/CSS
P粉135292805
2023-08-20 19:15:25
<p>J'essaie de définir un <div> sur un pourcentage de hauteur spécifique en CSS, mais c'est toujours la même taille que le contenu qu'il contient. Cependant, lorsque je supprime le <!DOCTYTPE html> de HTML 5, cela fonctionne correctement et le <div> occupe la totalité de la page comme prévu. Je veux que la page réussisse la vérification, que dois-je faire ? </p>
<p>J'ai ce CSS sur <div> et son ID est <code>page</code> : </p>
<pre class="brush:php;toolbar:false;">#page {
remplissage : 10 px ;
couleur de fond : blanc ;
hauteur : 90% !important;
}</pré>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous devez également définir la hauteur des éléments
<html>和<body>, sinon ils seront seulement assez grands pour s'adapter au contenu. Par exemple :<!DOCTYPE html> <title>Example of 100% width and height</title> <style> html, body { height: 100%; margin: 0; } div { height: 100%; width: 100%; background: red; } </style> <div></div>Qu'est-ce que le pourcentage ?
Pour définir le pourcentage de hauteur, son élément parent (*) doit avoir une hauteur explicite. C'est assez évident, si vous laissez la hauteur comme
auto, le bloc prendra la hauteur de son contenu... Par contre, si la hauteur du contenu lui-même est exprimée en pourcentage de l'élément parent, vous êtes dans un petit peu dilemme. Le navigateur abandonne et utilise simplement la hauteur du contenu.Par conséquent, l'élément parent du div doit avoir un attribut
heightexplicite. Bien que la hauteur puisse être un pourcentage si vous préférez, cela fait simplement passer le problème au niveau supérieur.Si vous souhaitez faire de la hauteur d'un div un pourcentage de la hauteur de la fenêtre d'affichage, chaque élément ancêtre du div, y compris
<html>和<body>，都必须具有height: 100%, il existe donc une chaîne de hauteur de pourcentage explicite pour le div.(* : Ou, si le div est positionné, le "bloc contenant", l'élément ancêtre le plus proche qui est également positionné.)
Alternativement, tous les navigateurs modernes et IE >= 9 prennent en charge de nouvelles unités CSS relatives à la hauteur de la fenêtre d'affichage (
vh)和视口宽度(vw) :div { height:100vh; }Voir plus d'informations ici.