HTML页面中textarea高度自适应解决方案

背景： 页面上加了一个div标签，div标签下有一个textarea标签，textarea的内容通过后台读取数据自动填充，希望通过textarea的高度随着内容的增减，自动调整，在网上说通过设置textarea属性可以解决，即：

onpropertychange="this.style.posHeight=this.scrollHeight" onfocus="this.style.posHeight=this.scrollHeight"

然而，设置过后，然并卵，问题依旧，继续网上找解决方案，终于在https://segmentfault.com/q/1010000000095238
网上找了一个解决方案，这个页面有一段话，如下：
1、加入标签：

<div class="expandingArea ">
    <pre><span></span><br></pre>
    <textarea placeholder="输入文字"></textarea>
</div>

2、div设置css属性，目的是用于textarea相对于expandingArea绝对定位：

.expandingArea{
    position:relative;
}

3、设置textarea的css属性

textarea{
    position:absolute;
    top:0;
    left:0；
    height:100%;
}

通过这样的样式设置，textArea的高度会始终等于expandingArea的高度，要让textarea的高度变化也只需要调整expadingArea的高度即可。那么怎么样让expandingArea的高度变化随内容高度变化而变化呢？答案就是这个pre
4、设置pre的css属性

pre{
    display:block;
    visibility:hidden;
}

pre以块形式存在，并且不可见，但是是占用空间的，不像display:none;什么空间也不占。这时需要把textarea中的内容实实的同时到pre里的span标签中，因为pre没有postion:absolute所以它的高度会一直影响expandingArea的高度。总结原理就是：pre会随内容的高度变化而变化，expandingArea的高度又随pre变化，因为textarea的高度100%textarea的高度会随expandingArea变化，只要同步textarea的内容到pre中，就达到一个textarea随内容高度变化的目的了
5、经过自己设置，内容如下：

<div id="rs" class="col-md-9" style="position:relative;">
    <pre style="display:block;visibility:hidden;"><span>content</span><br></pre>
    <textarea style="position:absolute;top:0;left:0;height:100%;" placeholder="输入文字">content</textarea>
</div>

其中content用实际从后台返回的结果填充。
经测试，方法可行。