167 votes

Css hauteur en pourcentage ne fonctionne pas

J'ai le code simple suivant:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Live Feed</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

        <style>
            body {
                margin: 0px;
                padding: 0px;
            }
        </style>
    </head>

    <body>
        <div style="background-color: #eeeeee; width: 250px; height: 100%; border-right: solid 1px #e1e1e1;">

        </div>
    </body>
</html>
 

Mais la div ne s'affiche pas avec une hauteur de 100%. Pourquoi?

192voto

Vous devez définir une hauteur de 100% sur votre élément parent, dans ce cas votre corps. Ce violon montre que ça marche.

94voto

mb21 Points 3703
 div {
    height:100vh; 
}
 

Fonctionne dans tous les navigateurs modernes et IE> = 9, voir ici pour plus d'informations .

28voto

GG. Points 3063

height: 100% fonctionne si vous attribuez une taille fixe à l'élément parent.

17voto

Muthu Points 21

Vous pouvez y parvenir en utilisant le positionnement.

Essayer

 position: absolute;
 

pour obtenir la hauteur de 100%.

4voto

Pramod Bhoi Points 101

Ajouter hauteur: 100% au corps

 body{height:100%}
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X