CSS: ¿por qué no funciona el porcentaje de altura?

¿Cómo es que un valor porcentual para la height no funciona, pero un valor porcentual para el width sí lo hace?

Por ejemplo :

 
 #working{ width:80%; height:140px; background:orange; } #not-working{ width:80%; height:30%; background:green; } 

El ancho de #working termina siendo el 80% de la ventana #working , pero la altura de #not-working termina siendo 0.

La altura de un elemento de bloque se predetermina a la altura del contenido del bloque. Entonces, dado algo como esto:

 

Where is pancakes house?

#inner crecerá para ser lo suficientemente alto como para contener el párrafo y #outer crecerá para ser lo suficientemente alto como para contener #inner .

Cuando especifica la altura o el ancho como un porcentaje, eso es un porcentaje con respecto al elemento principal del elemento. En el caso del ancho, todos los elementos del bloque son, a menos que se especifique lo contrario, tan anchos como sus padres hasta llegar a ; por lo tanto, el ancho de un elemento de bloque es independiente de su contenido y dice width: 50% produce un número bien definido de píxeles.

Sin embargo, la altura de un elemento de bloque depende de su contenido a menos que especifique una altura específica. Por lo tanto, existe una retroalimentación entre el padre y el niño en lo que se refiere a la altura y diciendo height: 50% no produce un valor bien definido a menos que se rompa el ciclo de retroalimentación al darle al elemento principal una altura específica.

Un valor porcentual en una propiedad de height tiene una pequeña complicación, y las propiedades de width y height realmente se comportan de manera diferente entre sí. Déjame llevarte de gira por las especificaciones.

propiedad de height :

Echemos un vistazo a lo que dice la especificación CSS Snapshot 2010 sobre la height :

El porcentaje se calcula con respecto a la altura del bloque que contiene la caja generada. Si la altura del bloque que lo contiene no se especifica explícitamente (es decir, depende de la altura del contenido), y este elemento no está completamente posicionado, el valor se computa a ‘auto’. Una altura de porcentaje en el elemento raíz es relativa al bloque contenedor inicial . Nota: Para elementos absolutamente posicionados cuyo bloque contenedor se basa en un elemento de nivel de bloque, el porcentaje se calcula con respecto a la altura del cuadro de relleno de ese elemento.

OK, desglosémoslo paso a paso:

El porcentaje se calcula con respecto a la altura del bloque que contiene la caja generada.

¿Qué es un bloque contenedor ? Es un poco complicado, pero para un elemento normal en la posición static predeterminada, es:

el cuadro ancestro contenedor de bloque más cercano

o en inglés, su cuadro principal. (Vale la pena saber también lo que sería para fixed posiciones fixed y absolute , pero estoy ignorando eso para mantener esta respuesta corta).

Entonces tome estos dos ejemplos:

 

Creo que solo necesitas darle un contenedor principal … incluso si la altura de ese contenedor está definida en porcentaje. Esto parece funcionar bien: JSFiddle

 html, body { margin: 0; padding: 0; width: 100%; height: 100%; } .wrapper { width: 100%; height: 100%; } .container { width: 100%; height: 50%; } 

Necesitas darle un contenedor con una altura. ancho utiliza la ventana gráfica como el ancho predeterminado

Otra opción es agregar estilo a div

 
//to be scrolled

Y significa que un elemento está ubicado en relación con el antecesor posicionado más cercano.

Sin contenido, la altura no tiene ningún valor para calcular el porcentaje de. El ancho, sin embargo, tomará el porcentaje del DOM, si no se especifica ningún padre. (Usando tu ejemplo) Colocando el segundo div dentro del primer div, habría dado un resultado … ejemplo abajo …

 

El segundo div sería el 30% de la altura del primer div.