web-dev-qa-db-fra.com

Hauteur de div en pourcentage

Duplicata possible:
Hauteur en pourcentage HTML 5/CSS

Cela doit être simple mais je pourquoi la hauteur spécifiée en pourcentage pour un div ne s'applique pas à elle.

Par exemple:

<div class="container">
  adsf
</div>

CSS:

.container
{
  width:80%;
  height:50%;
  background-color:#eee;
}

Lorsque je change la hauteur de% en px, cela fonctionne parfaitement. % est aussi valide que px mais pourquoi seul px fonctionne et% non. ici est le jsfiddle

Edit Bien que j'ai raté le point-virgule après 50% de la question d'origine, ce qui l'a totalement gâché. En fait, ce que j'avais l'intention de demander, c'est pourquoi le 50% ne le fait-il pas consommer le 50% de son contenant. Il ne prend sa hauteur que de son contenu plutôt que de 50% de son contenant.

csshtmlpercentagejsfiddle
22
ZedBee

Cela ne prend pas 50% de la page entière parce que la "page entière" est seulement la hauteur de votre contenu. Modifiez la hauteur html et body englobante en 100% Hauteur et cela fonctionnera.

html, body{
    height: 100%;
}
div{
    height: 50%;
}

http://jsfiddle.net/DerekL/5YukJ/1/

enter image description here

^ Votre document ne fait que 20 pixels de haut. 50% de 20px est 10px, et ce n'est pas ce que vous attendiez.

enter image description here

^ Maintenant, si vous changez la hauteur du document en hauteur de la page entière (150 px), 50% de 150 px est 75 px, alors cela fonctionnera.

63
Derek 朕會功夫

Vous devez également donner une hauteur au body et au html. Sinon, le corps ne sera aussi élevé que son contenu (le div simple), et 50% de cela sera la moitié de la hauteur de ce div.

Violon mis à jour: http://jsfiddle.net/j8bsS/5/

3
Mr Lister

Il manque le point-virgule (;) après le "50%"

mais vous devez également remarquer que le pourcentage de votre div est connecté à celui qui le contient.

par exemple:

<div id="wrapper">
  <div class="container">
   adsf
  </div>
</div>

#wrapper {
  height:100px;
}
.container
{
  width:80%;
  height:50%;
  background-color:#eee;
}

ici la hauteur de votre .container sera de 50px. ce sera 50% des 100px de la div wrapper.

si tu as:

adsf

#wrapper {
  height:400px;
}
.container
{
  width:80%;
  height:50%;
  background-color:#eee;
}

alors votre .container sera 200px. 50% de l'emballage.

Donc, vous voudrez peut-être regarder les divs "enveloppant" votre ".container" ...

1
Boguz Didgeridoo