recherche

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

Conseils pour le pourcentage de hauteur HTML 5/CSS

<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粉135292805P粉135292805511 Il y a quelques jours635

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

  • P粉759451255

    P粉7594512552023-08-21 18:49:34

    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>

    répondre
    0
  • P粉530519234

    P粉5305192342023-08-21 00:27:22

    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.

    répondre
    0
  • Annulerrépondre