Высота установки: 100% на мой элемент метки не работает

Question

Я попытался установить height: 100%; на этикетке, но это не сработало. Почему нет?

.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; 
 
}

<div class="field large"> 
 
    <label>Textarea</label> 
 
    <textarea></textarea> 
 
</div>

Answer 1

Вы высота установлена ​​на 100%, но 100% от чего? Он всегда является родительским элементом этого элемента, и какова высота родителя? Если он не настроен ни на что, браузер не имеет ничего общего.

Answer 2

В этом случае я считаю, что высота вашего div определяется высотой самого высокого элемента внутри него: текстовая область. (Reference) Возможно, вы хотите выяснить, сколько пикселей высока ваша текстовая область (например, это можно сделать с помощью Firebug или IE или инструментов разработчика Chrome), а затем установите метку на ту же высоту.

Я бы также явно установил высоту для текстовой области, чтобы убедиться, что она одинакова во всех браузерах.

---

Причина height: 100% не работает, как вы ожидаете, что родительский элемент имеет высоту auto. Это приводит к тому, что ваш ярлык также получает вычисленную высоту auto.

< Процент > Указывает процентную высоту. Процент вычисляется относительно высоты блока, содержащего сгенерированный блок. Если высота содержащего блока явно не указана (т. Е. Зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, значение вычисляется как «авто».

( Reference)