1. 程式人生 > >css textarea 高度自適應,無滾動條

css textarea 高度自適應,無滾動條

用css控制textarea文字域的高度隨內容的變化而變化,不出現滾動條.
CSS程式碼:

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


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

複製程式碼程式碼如下:
<style>
textarea
{
width:100%;
height:100%;
}
</style>
<textarea name="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.
讓人抓狂的ie6 !!!!
overflow的允許屬性:auto、visible、hidden
示例:
overflow-x:visible;
overflow-y:visible;