Javascript 如何扩展文本区域以填充页面

我有一个非常简单的html页面，上面有一个工具栏和一个文本区。我希望文本区域填充顶部栏留下的高度。它需要在调整大小后自动调整

例如

---

我尝试过很多东西，但最后总是会出现两个滚动条（一个用于文本区域，一个用于正文）。

如果我理解正确，也许这会有所帮助，但我不确定这是否是你想要的，这只是我想你可能会问的原始版本。还请注意，如果您已经为css进行了重置，则可以避免一些声明

HTML

<div class="content">
    <div id="top"></div>
    <textarea id="text"></textarea>
</div>

---

如果您有固定高度的顶部栏，您可以使用文本区域上的绝对位置来填充剩余区域，如下所示：

正文{
保证金：0；
}
#顶{
颜色：#ffffff；
背景#333399；
高度：50px；
填充：10px；
-webkit框大小：边框框；
框大小：边框框；
}
#正文{
位置：绝对位置；
顶部：50px；
底部：0；
左：0；
右：0；
宽度：100%；
填充：10px；
保证金：0；
调整大小：无；
-webkit框大小：边框框；
框大小：边框框；
}

顶部
text区域

检查此代码

JS:

CSS:

---

你能告诉我们你试过什么吗？你可能走对了路，但我们不知道，这浪费了每个人的时间一般来说，“溢出”属性控制滚动条的外观，但正如@SterlingArcher所说的，让我们知道你尝试了什么——重要的是，在本例中，你的目标浏览器是什么。我不想明确设置顶部栏的大小。我想让它自由增长，文本div占据剩下的100%。当textarea有足够大的文本时，这会提供两个滚动条。这在Chrome中不会发生。当有足够的文本时，我得到的只是文本区域上的一个垂直滚动条。你的浏览器是什么？Chrome。我填充了文本区域并点击了两个栏。对不起，我无法重现您的问题。

<div class="content">
    <div id="top"></div>
    <textarea id="text"></textarea>
</div>

body,html{
    height:100%;
    padding:0;
    margin:0;
}
.content{
    position:relative;
    height:100%;
}
#top{
    height:50px;
    background-color:#CCC;
    width:100%;
}
#text{
    height:85%;
    border:0;
    padding:0;
    margin:0;
    background-color:#999;
}

totalCalc();
function totalCalc()
{
    var bodyHeight = $("body").outerHeight(true);
    var topHeight = $("#top").outerHeight(true);
    var txtareaHeight = bodyHeight - topHeight - 10;
    $('#text').attr("style", "height:" + txtareaHeight + "px");
}
$(window).resize(totalCalc);

*{margin:0; padding:0; font-family:Tahoma; font-size:12px; color:#333;}
html, body{height:100%; overflow:hidden;}
#top{padding:10px;}
#text{margin:0 10px;}