表响应textarea

Question

如何使用文本框高度更改tbody高度。而不是文本框获得滚动条。

---

这是我的HTML：

<table align="center" width="80%" border="1">
    <tbody class="tbody1">
//text entries - see fiddle
    </tbody>
    <tbody class="tbody2">
        <tr>
            <td>
                <textarea rows="1" style="width:100%" class="wide boxsizingBorder" autocomplete="off" name="txt" type="text" id="usermsg" value=""></textarea>
            </td>
        </tr>
    </tbody>
</table>

这是css：

textarea {
    resize: none;
}
.boxsizingBorder {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    height: 100%;
    overflow: hidden;
    margin: 0;
}
table {
    height: 100%;
    overflow: hidden;
}
.tbody1{
    overflow: auto;
    width:100%;
    height:100%;
    display: block;
}
.tbody2{
    margin: 0;
}

请参阅fiddle

---

当我在文本区域输入文本时，它会创建一个滚动条，我希望tbody高度增加到最大值25％，然后滚动。就像facebook一样。

我怎么能这样做？