Простая высота: 50% не сработает.
Нет, потому что его родитель не имеет явной высоты. Так 50% чего? Родитель говорит «авто», что означает основание его на высоте дочернего содержимого. Который зависит от роста на родителя. Argh! и т.д.
Таким образом, вы должны задать родительскому элементу процентную высоту. И родительский родитель, вплоть до корня. Пример документа:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<style type="text/css">
html, body { margin: 0; padding: 0; }
html, body, #mything, #mything textarea { height: 100%; }
</style>
</head><body>
<div id="mything">
<textarea rows="10" cols="40">x</textarea>
</div>
</body></html>
Другая возможность, если вам не нужно устанавливать высоту, - использовать абсолютное позиционирование. Это изменяет элемент, на котором основаны измерения, с прямого родителя на ближайшего предка с настройкой «position», отличной от «static» по умолчанию. Если нет элементов-предков с позиционированием, то размеры основаны на «Исходном содержащем блоке», который имеет тот же размер, что и окно просмотра.
Наконец, существует тривиальная проблема, связанная с тем, что «100%» немного великовато из-за дополнительных отступов и границ, применяемых к текстовым областям. Вы можете обойти это:
- компромисс на что-то вроде 95% или
- установка отступа и границы на 0 / нет на текстовой области, или
- с использованием «box-sizing: border-box;» для изменения значения «высота». Это функция будущего CSS-супа, которая требует много дополнительных специфических для браузера выражений (таких как mo -moz-box-sizing ’).