文字框是很常見的輸入控制項，我相信只要寫過表單的肯定接觸過 textarea 這個元素。
ok。但是現在產品經理說了：需要這個文字框可以根據使用者輸入內容自適應其高度。
有些初學者可能會想：自適應高度不就是height: auto麼？可是你想一下，乙個textarea沒有手工給它指定過樣式，不應該就預設是height: auto麼？但是它還是有自己的初始高度，並沒有像乙個div那樣高度為 0。
與div不同，textarea的預設高度不是根據其內容自適應，而是由屬性 rows 指定，其預設值是2。rows這個屬性（attribute）只接受正整數，指定其他值瀏覽器會忽略掉其值，比如你寫rows="auto"那麼rows就是 2，rows="0"也是 2。
所以指定height: auto是行不通的，height屬性必須人工指定其值。
遇到過這個問題的同學（比如當初的筆者），肯定想到過scrollheight這個 dom 屬性。想法很簡單，當使用者輸入的文字超過了文字框自身高度時不是會出現滾動條嘛，那麼自然而然就能想到 scrollheight 這個屬性。scrollheight就應該是使用者輸入文字的真實高度，至少超過文字框既定高度時是這樣。
那麼問題來了：如果沒超過呢？
ok 我知道你會先指定rows="1"讓文字框預設高度只有一行。但是考慮這種情況：使用者先輸入了很多行文字
然後刪除了一段：
scrollheight值沒有變化。mdn 上說了：
沒有垂直滾動條的情況下，scrollheight值與元素檢視填充所有內容所需要的最小值clientheight相同
scrollheight確實會隨著使用者輸入內容多少而增減，但是僅限於出現滾動條的情況，對於題設這個情況必然不適用，因為需求就是不能出現滾動條（嚴格來說是超出可視區域）。你可以在獲取scrollheight的值之前先把文字框高度設為 0 強制讓滾動條出現，但是這樣可能使頁面發生閃爍，而且效能也低。
dom 屬性靠不住，那我自己算文字高度不行嗎？說我拿出所有文字，按換行符拆分，看有多少行，行數 * 行高不就是最終文字高度嗎？
額。。。當文字沒有折行的情況下是這樣。。。
contenteditable 確實是乙個（相對）可行的方案，但是作為乙個踩過坑的先行者勸解你：不到萬不得已，contenteditable 不要碰。這個玩意各個瀏覽器實現都不一樣，各種奇葩行為，光乙個換行符就足夠折磨你半天。
當然這裡還沒有到那麼複雜的地步，但是你得先會把「複製——貼上」過去的樣式去掉才行
說了那麼多廢話，那麼究竟該怎麼辦呢？這裡筆者提供一種方法。
我們想一下，textarea不能按照內容自適應高度，div可以啊，能不能先把文字填到乙個div裡，div的高度就應該是文字框所需高度（當padding、line-height等樣式都一致的情況下），這時獲取div的高度賦值給文字框高度不就行了嗎。
就是這樣的思路。我們也不需要專門使用 js 獲取，只要讓div把父元素撐起來，絕對定位textarea元素讓文字框佔滿整個父元素大小就好了。
直接上**：
三個要點：
字型相關樣式#dummy和textarea兩元素必須完全一致，差一點就可能出現兩者高度對不上的情況。
#dummy中white-space: pre-wrap醒目。否則會出現 html 中吞空格、換行符的情況。
就算有了white-space: pre-wrap，html 仍然會吞掉最後的換行符。解決方案是在#dummy最後插入乙個換行符元素。可以是
，也可以是乙個偽元素。偽元素中換行符的寫法是\a（即換行符的 ascii 碼 10 的十六進製制表示。不能寫\n）
**中是用 js 給#dummy賦值。專案中如果你用vuejs或angular等 mvvm 框架，直接把文字框的值繫結到div上就好，非常方便。
如果你要限制文字框的最大最小高度，在#dummy上直接設定min-heightmax-height即可。
最後說一句：把textarea蓋到乙個div上的做法還可以簡單的實現文字框的語法高亮，讀者可以想想怎麼做。
編寫自適應高度的 textarea
文字框是很常見的輸入控制項，我相信只要寫過表單的肯定接觸過 textarea 這個元素。ok。但是現在產品經理說了 需要這個文字框可以根據使用者輸入內容自適應其高度。有些初學者可能會想 自適應高度不就是height auto麼？可是你想一下，乙個textarea沒有手工給它指定過樣式，不應該就預設是...
高度自適應
開發中遇到乙個問題，要求不管在多高的螢幕下，什麼都行 到底部的距離都應該和psd一致，flash裡面的問題 定義寬度 var psdwidth 750 定義高度 var psdheight 1448 獲取手機螢幕寬度 var w window.innerwidth document.document...
高度自適應
1.高度不去設定，或者高度設定auto 內容撐開父元素的高度。2.內容撐開父元素的高度 最小高度的設定 min height 3.浮動元素新增高度自適應 新增浮動元素的父元素沒有高度，會出現高度塌陷 1 給出現高度塌陷的元素新增 overflow hidden 原理 overflow hidden ...