Ответ 1
У вас есть высота, равная 100%, но 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>
У вас есть высота, равная 100%, но 100% чего? Он всегда является родительским элементом этого элемента, и какова установлена родительская высота? Если он не настроен ни на что, браузер не имеет никакого отношения.
В этом случае я считаю, что высота вашего div определяется высотой самого высокого элемента внутри него: текстовая область. (Ссылка) Возможно, вы хотите выяснить, сколько пикселей высока ваша текстовая область (например, это можно сделать с помощью Firebug, IE или Chrome), а затем установите метку на ту же высоту.
Я бы также явно установил высоту для текстовой области, чтобы она была одинаковой во всех браузерах.
Причина height: 100%
не работает, поскольку вы ожидаете, что родительский элемент имеет высоту auto
. В результате ваш ярлык также получает вычисленную высоту auto
.
< процент > Определяет процентную высоту. Процент вычисляется относительно высоты генерируемого блока, содержащего блок. Если высота содержащего блока явно не указана (т.е. Зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, значение вычисляется как "авто".(Ссылка)