DIV CSS 佈局教程網

你對CSS textarea高度自適應的概念是否熟悉，這裡和大家描述一下，希望對你的學習有所幫助。

CSS textarea高度自適應

用CSS控制textarea文本域的高度隨內容的變化而變化，不出現滾動條。

CSS代碼:

代碼如下:

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

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

代碼如下:

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

統一在FF、IE下的顯示效果：

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

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

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

IE6中textarea寬度問題

textarea設了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簡介以及優缺點
5. IE6中常見CSS兼容性解決十大技巧