我认为重要的是要了解，height: 100%如果您明确将文本区域设置为怪异模式，则文本区域的设置仅在 IE 中有效，尽管它在 Firefox 中按预期工作。W3C 规定文本区域的大小是按行而不是像素等定义的。
下面显示的是一种确保文本区域的大小始终占据整个主体高度的简单方法，考虑到大量的用户安装的工具栏等、不同的显示器分辨率，甚至可能调整窗口大小。关键是简单的JS方法及其放置。该表单只是用来模拟普通的文本框和标签。
<html>
<head runat="server"><title>Look, Mom! No Scrollbars!</title></head>
<body onload="resizeTextArea()" onresize="resizeTextArea()">
<form id="form1" runat="server">
<div id="formWrapper" style="height:200px">
<input type="text" value="test" />
<input type="text" value="test" />
</div>
<textarea id="area" style="width: 100%"></textarea>
</form>
<script type="text/javascript">
function resizeTextArea() {
//Wrap your form contents in a div and get its offset height
var heightOfForm = document.getElementById('formWrapper').offsetHeight;
//Get height of body (accounting for user-installed toolbars)
var heightOfBody = document.body.clientHeight;
var buffer = 35; //Accounts for misc. padding, etc.
//Set the height of the textarea dynamically
document.getElementById('area').style.height =
(heightOfBody - heightOfForm) - buffer;
//NOTE: For extra panache, add onresize="resizeTextArea()" to the body
}
</script>
</body>
</html>
将其复制并粘贴到新页面中。它适用于 FF 和 IE。
希望这可以帮助！