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

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

onpropertychange="this.style.posHeight=this.scrollHeight" οnfοcus="this.style.posHeight=this.scrollHeight"

然而，设置过后，然并卵，问题依旧，继续网上找解决方案，终于在https://segmentfault.com/q/1010000000095238

网上找了一个解决方案，这个页面有一段话，如下：

1、加入标签：

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、经过自己设置，内容如下：

content

content

其中content用实际从后台返回的结果填充。

经测试，方法可行。