Configuración de altura: 100% en mi elemento de etiqueta no funciona

Traté de establecer la height: 100%; en la etiqueta, pero no funcionó. Por qué no?

 .field label { color:#3E3E3E; font-weight:bold; width:80px; display:block; float:left; margin-top:5px; margin-left:3px; height:100%; /* <-- doesn't work */ } .field { display:block; margin-bottom:9px; background:none; border:none; } 
 

¿Tiene la altura establecida en el 100% pero el 100% de qué? Siempre es el padre de ese elemento, entonces, ¿cuál es la altura de los padres? Si no está configurado en nada, entonces el navegador no tiene nada que hacer referencia.

En este caso, creo que la altura de su div está siendo determinada por la altura del elemento más alto dentro de él: el área de texto. ( Referencia ) Tal vez quiera saber cuántos píxeles de alto tiene su área de texto (por ejemplo, esto se puede hacer con Firebug, o las herramientas de desarrollo de IE o Chrome), y luego configure su etiqueta a la misma altura.

También establecí explícitamente esa altura para el área de texto para asegurarme de que sea la misma en todos los navegadores.


La height: 100% razón height: 100% no está funcionando como espera es que el elemento padre tenga una altura de auto . Esto da como resultado que su etiqueta también obtenga una altura calculada de auto .

Especifica una altura porcentual. 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’.

( Referencia )