你對CSS textarea高度自適應(yīng)的概念是否熟悉，這里和大家描述一下，希望對你的學(xué)習(xí)有所幫助。

CSS textarea高度自適應(yīng)

用CSS控制textarea文本域的高度隨內(nèi)容的變化而變化，不出現(xiàn)滾動條。

CSS代碼:

代碼如下:

.t_area{  
width:300px;  
overflow-y:visible  
}  
<textareaclasstextareaclass="t_area"> 
隨便在這里輸入內(nèi)容,textarea的高度會隨著你輸入的內(nèi)容而變化,  
不會出現(xiàn)滾動條,實現(xiàn)很簡單,就是一段CSS:overflow-y:visible  
</textarea> 

首先，原則上實現(xiàn)textarea自適應(yīng)必須適用CSS，不能直接適用“width＝100%”這樣的寫法，具體示例：

代碼如下:

<style> 
textarea  
{  
width:100%;  
height:100%;  
}  
</style> 
<textareanametextareaname="textarea"> 
xxxxx  
</textarea> 
 

 統(tǒng)一在FF、IE下的顯示效果：

如果用textarea的屬性字數(shù)寬度（cols）和行數(shù)（rows）來控制textarea的大小你會發(fā)現(xiàn)在，在IE和FF下的每行字數(shù)和文字的行數(shù)都不相同，而且在字數(shù)不足滾動的情況下，IE是默認有滾動條的，而FF是沒有滾動條的。
那如何控制textarea在IE中和FF中相同的效果呢，其實比較簡單：

1、用textarea的寬度（widht）和高度（height）來定義textarea的大??；

2、讓滾動條自適應(yīng)：overflow-y:auto。

IE6中textarea寬度問題

textarea設(shè)了100%寬度,在IE7,FIREFOX都正常顯示.但在IE6里只要輸入文字就會自動增寬.

解決方法:在textarea外再加一個100%寬的div.

overflow的允許屬性：auto、visible、hidden

示例：

overflow-x:visible;  
overflow-y:visible;  

【編輯推薦】

1. 探究CSS caption-side屬性使用
2. IE6.0對padding的解讀分析
3. CSS樣式表高效使用八大秘訣
4. CSS Sprites簡介以及優(yōu)缺點
5. IE6中常見CSS兼容性解決十大技巧