背景： 頁面上加了一個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用實際從后臺返回的結果填充。

經測試，方法可行。

總結

以上是生活随笔為你收集整理的html textarea 自动高度,HTML页面中textarea高度自适应解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。