背景： 頁(yè)面上加了一個(gè)div標(biāo)簽，div標(biāo)簽下有一個(gè)textarea標(biāo)簽，textarea的內(nèi)容通過(guò)后臺(tái)讀取數(shù)據(jù)自動(dòng)填充，希望通過(guò)textarea的高度隨著內(nèi)容的增減，自動(dòng)調(diào)整，在網(wǎng)上說(shuō)通過(guò)設(shè)置textarea屬性可以解決，即：

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

然而，設(shè)置過(guò)后，然并卵，問(wèn)題依舊，繼續(xù)網(wǎng)上找解決方案，終于在https://segmentfault.com/q/1010000000095238

網(wǎng)上找了一個(gè)解決方案，這個(gè)頁(yè)面有一段話，如下：

1、加入標(biāo)簽：

2、div設(shè)置css屬性，目的是用于textarea相對(duì)于expandingArea絕對(duì)定位：

.expandingArea{

position:relative;

}

3、設(shè)置textarea的css屬性

textarea{

position:absolute;

top:0;

left:0；

height:100%;

}

通過(guò)這樣的樣式設(shè)置，textArea的高度會(huì)始終等于expandingArea的高度，要讓textarea的高度變化也只需要調(diào)整expadingArea的高度即可。那么怎么樣讓expandingArea的高度變化隨內(nèi)容高度變化而變化呢？答案就是這個(gè)pre

4、設(shè)置pre的css屬性

pre{

display:block;

visibility:hidden;

}

pre以塊形式存在，并且不可見(jiàn)，但是是占用空間的，不像display:none;什么空間也不占。這時(shí)需要把textarea中的內(nèi)容實(shí)實(shí)的同時(shí)到pre里的span標(biāo)簽中，因?yàn)閜re沒(méi)有postion:absolute所以它的高度會(huì)一直影響expandingArea的高度。總結(jié)原理就是：pre會(huì)隨內(nèi)容的高度變化而變化，expandingArea的高度又隨pre變化，因?yàn)閠extarea的高度100%textarea的高度會(huì)隨expandingArea變化，只要同步textarea的內(nèi)容到pre中，就達(dá)到一個(gè)textarea隨內(nèi)容高度變化的目的了

5、經(jīng)過(guò)自己設(shè)置，內(nèi)容如下：

content

content

其中content用實(shí)際從后臺(tái)返回的結(jié)果填充。

經(jīng)測(cè)試，方法可行。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。