css - tamaño - Altura div en porcentaje

html height auto adjust

Question

Posible duplicado:
Porcentaje de altura HTML 5 / CSS

Esto debe ser simple, pero no se aplica a la altura especificada en porcentaje para un div.

Por ejemplo:

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

CSS:

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

Cuando cambio la altura de% a px funciona perfectamente. % es tan válido como px pero por qué solo px funciona y% no. here esta el jsfiddle

Editar Aunque perdí el punto y coma después del 50% en la pregunta original, lo estropeó totalmente. De hecho, lo que pretendía preguntar era por qué el 50% no hace que consuma el 50% de su envase. Solo toma su altura de su contenido en lugar del 50% de su contenedor.

Answer 1

Falta el punto y coma (;) después del "50%"

pero también debes notar que el porcentaje de tu div está conectado al div que lo contiene.

por ejemplo:

<div id="wrapper">
<div class="container">
adsf
</div>
</div>
#wrapper {
height:100px;
}
.container
{
width:80%;
height:50%;
background-color:#eee;
}

Aquí la altura de su .container será de 50px. será el 50% de los 100px del envoltorio div.

si usted tiene:

adsf

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

entonces tu .container será 200px. 50% de la envoltura.

Así que es posible que desee ver a los divs "envolviendo" su "contenedor" ...

Answer 2

Necesitas darle al body y al html una altura también. De lo contrario, el cuerpo solo será tan alto como su contenido (el div único), y el 50% será la mitad de la altura de este div.

Fiddle actualizado: http://jsfiddle.net/j8bsS/5/

Answer 3

No toma el 50% de toda la página porque la "página entera" es solo la altura de sus contenidos. Cambie el html y el body html a 100% altura y funcionará.

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

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

^ Tu documento solo tiene 20 px de alto. 50% de 20px es 10px, y no es lo que esperaba.

^ Ahora, si cambia la altura del documento a la altura de toda la página (150px), el 50% de 150px es 75px, entonces funcionará.