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

Я попытался установить 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>

Ответы

Ответ 1

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

Ответ 2

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

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

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

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