web-dev-qa-db-fra.com

Pourcentage de hauteur ne fonctionnant pas en CSS

J'essaie d'utiliser la propriété height en utilisant des pourcentages, mais cela ne fonctionne pas. Je veux utiliser le pourcentage afin qu'il semble bien dans n'importe quelle résolution.

<div id="bloque_1" style="height: 80%;background: red">   
</div>

Comment puis-je le faire fonctionner?

htmlcssheight
13
Flezcano

Lorsque vous utilisez % pour la largeur ou la hauteur, la première question que vous devez vous poser est que 80% de quoi? Donc, vous devez également appliquer la hauteur à l'élément parent, donc en supposant que cet élément est à l'intérieur de la balise body, vous devez l'utiliser dans votre CSS

html, body {
   height: 100%;
}

Alors maintenant, votre élément div sera 80% de 100%

Démo

Note latérale: Lorsque vous traitez avec des éléments positionnés absolute, vous pouvez rencontrer un scénario dans lequel votre div ne dépassera pas la hauteur actuelle de la fenêtre, donc dans ce cas, vous devez avoir min-height

37
Mr. Alien

Tout en dehors de bloque_1 aura également besoin d'une hauteur, ou vous obtiendrez 80% de 0. Vous devrez peut-être également appliquer une hauteur de 100% à body.

Voici un jsfiddle qui le montre en action.

5
neokio

Appliquer 100% hauteur sur votre élément parent

HTML code-

<html>
<body>
<div id="bloque_1" style="height:80%;background:red;width:100%;">   
</div>
</body>
</html>

CSS Part-

html, body { height: 100%; width: 100%; margin: 0;background: #3c3c3c }

Fonctionne Fiddle - http://jsfiddle.net/SEafD/1/

2
swapnesh

Démo

html,body{
    height:100%
}
#bloque_1{
    background:red;
    height:80%;
}
0
Rajender Joshi