简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Conseils pour le pourcentage de hauteur HTML 5/CSS
P粉135292805
P粉135292805 2023-08-20 19:15:25
0
2
553
<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é>
P粉135292805
P粉135292805

répondre à tous(2)
P粉759451255
P粉7594512552023-08-21 18:49:34 2 plancher

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>
Comme +0
Ajouter une réponse
P粉530519234
P粉5305192342023-08-21 00:27:22 1 plancher

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

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！