css textarea 高度自適應(yīng),無(wú)滾動(dòng)條
發(fā)布時(shí)間：2009-07-11 13:27:55 作者：佚名 
我要評(píng)論
我要評(píng)論用css控制textarea文本域的高度隨內(nèi)容的變化而變化,不出現(xiàn)滾動(dòng)條.
用css控制textarea文本域的高度隨內(nèi)容的變化而變化,不出現(xiàn)滾動(dòng)條.
CSS代碼:
.t_area{
width:300px;
overflow-y:visible
}
<textarea class="t_area">
隨便在這里輸入內(nèi)容,textarea的高度會(huì)隨著你輸入的內(nèi)容而變化,不會(huì)出現(xiàn)滾動(dòng)條,實(shí)現(xiàn)很簡(jiǎn)單,就是一段css:overflow-y:visible
</textarea>
首先，原則上實(shí)現(xiàn)textarea自適應(yīng)必須適用css，不能直接適用“width＝100%”這樣的寫(xiě)法，具體示例：
<style>
textarea
{
width:100%;
height:100%;
}
</style>
<textarea name="textarea">
xxxxx
</textarea>
統(tǒng)一在FF、IE下的顯示效果：
如果用textarea的屬性字?jǐn)?shù)寬度（cols）和行數(shù)（rows）來(lái)控制textarea的大小你會(huì)發(fā)現(xiàn)在，在IE和FF下的每行字?jǐn)?shù)和文字的行數(shù)都不相同，而且在字?jǐn)?shù)不足滾動(dòng)的情況下，IE是默認(rèn)有滾動(dòng)條的，而FF是沒(méi)有滾動(dòng)條的。
那如何控制textarea在IE中和FF中相同的效果呢，其實(shí)比較簡(jiǎn)單：
1、用textarea的寬度（widht）和高度（height）來(lái)定義textarea的大?。?
2、讓滾動(dòng)條自適應(yīng)：overflow-y:auto。
IE6中textarea寬度問(wèn)題
textarea設(shè)了100%寬度,在IE7,FIREFOX都正常顯示.但在IE6里只要輸入文字就會(huì)自動(dòng)增寬.
解決方法:在textarea外再加一個(gè)100%寬的div.
讓人抓狂的ie6 ！?。?！
overflow的允許屬性：auto、visible、hidden
示例：
overflow-x:visible;
overflow-y:visible;
用js實(shí)現(xiàn)版本
提示：您可以先修改部分代碼再運(yùn)行
css實(shí)現(xiàn)版本（不能在標(biāo)準(zhǔn)頁(yè)面中執(zhí)行，已經(jīng)就是不能加
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
）
<title>文本域自適應(yīng)高度</title>
<textarea style="width:300px;overflow-y:visible">在這里輸入一些字符看一下，當(dāng)超出初設(shè)的文本域高度時(shí)，文本域自動(dòng)伸縮變高。
另一個(gè)js版本textarea自適應(yīng)高度
項(xiàng)目中要求textarea自適應(yīng)高度，在網(wǎng)上找到這個(gè)很好的方法 。記錄下來(lái)以后備用。
function BodyOnLoad()
{
var textarea= document.getElementById("textarea");
textarea.style.posHeight=textarea.scrollHeight;
}
scrollHeight：獲取對(duì)象的滾動(dòng)高度。
posHeight：設(shè)置或獲取以 height 標(biāo)簽屬性指定的單位的對(duì)象高度。
把方法加在body的onload事件上
<body onload = "BodyOnLoad();">
綜上所述，兼容性什么的用css實(shí)現(xiàn)的稍微好點(diǎn)，但是非標(biāo)準(zhǔn)情況下，才可以。
CSS代碼:
復(fù)制代碼
代碼如下:.t_area{
width:300px;
overflow-y:visible
}
<textarea class="t_area">
隨便在這里輸入內(nèi)容,textarea的高度會(huì)隨著你輸入的內(nèi)容而變化,不會(huì)出現(xiàn)滾動(dòng)條,實(shí)現(xiàn)很簡(jiǎn)單,就是一段css:overflow-y:visible
</textarea>
首先，原則上實(shí)現(xiàn)textarea自適應(yīng)必須適用css，不能直接適用“width＝100%”這樣的寫(xiě)法，具體示例：
復(fù)制代碼
代碼如下:<style>
textarea
{
width:100%;
height:100%;
}
</style>
<textarea name="textarea">
xxxxx
</textarea>
統(tǒng)一在FF、IE下的顯示效果：
如果用textarea的屬性字?jǐn)?shù)寬度（cols）和行數(shù)（rows）來(lái)控制textarea的大小你會(huì)發(fā)現(xiàn)在，在IE和FF下的每行字?jǐn)?shù)和文字的行數(shù)都不相同，而且在字?jǐn)?shù)不足滾動(dòng)的情況下，IE是默認(rèn)有滾動(dòng)條的，而FF是沒(méi)有滾動(dòng)條的。
那如何控制textarea在IE中和FF中相同的效果呢，其實(shí)比較簡(jiǎn)單：
1、用textarea的寬度（widht）和高度（height）來(lái)定義textarea的大?。?
2、讓滾動(dòng)條自適應(yīng)：overflow-y:auto。
IE6中textarea寬度問(wèn)題
textarea設(shè)了100%寬度,在IE7,FIREFOX都正常顯示.但在IE6里只要輸入文字就會(huì)自動(dòng)增寬.
解決方法:在textarea外再加一個(gè)100%寬的div.
讓人抓狂的ie6 ！?。?！
overflow的允許屬性：auto、visible、hidden
示例：
overflow-x:visible;
overflow-y:visible;
用js實(shí)現(xiàn)版本
提示：您可以先修改部分代碼再運(yùn)行
css實(shí)現(xiàn)版本（不能在標(biāo)準(zhǔn)頁(yè)面中執(zhí)行，已經(jīng)就是不能加
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
）
復(fù)制代碼
代碼如下:<title>文本域自適應(yīng)高度</title>
<textarea style="width:300px;overflow-y:visible">在這里輸入一些字符看一下，當(dāng)超出初設(shè)的文本域高度時(shí)，文本域自動(dòng)伸縮變高。
另一個(gè)js版本textarea自適應(yīng)高度
項(xiàng)目中要求textarea自適應(yīng)高度，在網(wǎng)上找到這個(gè)很好的方法 。記錄下來(lái)以后備用。
復(fù)制代碼
代碼如下:function BodyOnLoad()
{
var textarea= document.getElementById("textarea");
textarea.style.posHeight=textarea.scrollHeight;
}
scrollHeight：獲取對(duì)象的滾動(dòng)高度。
posHeight：設(shè)置或獲取以 height 標(biāo)簽屬性指定的單位的對(duì)象高度。
把方法加在body的onload事件上
<body onload = "BodyOnLoad();">
綜上所述，兼容性什么的用css實(shí)現(xiàn)的稍微好點(diǎn)，但是非標(biāo)準(zhǔn)情況下，才可以。
相關(guān)文章
純Css實(shí)現(xiàn)Div高度根據(jù)自適應(yīng)寬度（百分比）調(diào)整
這篇文章主要介紹了純Css實(shí)現(xiàn)Div高度根據(jù)自適應(yīng)寬度（百分比）調(diào)整，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著2020-07-16css和css3彈性盒模型實(shí)現(xiàn)元素寬度（高度）自適應(yīng)
這篇文章主要介紹了css和css3彈性盒模型實(shí)現(xiàn)元素寬度（高度）自適應(yīng)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋2019-05-15- 對(duì)象height:100%并不能直接產(chǎn)生效果，是因?yàn)楦涓笇?duì)象有關(guān)，下面有個(gè)示例為大家詳細(xì)介紹下，感興趣的朋友可以參考下2013-09-04
CSS min-height IE6、IE7、FF下DIV自適應(yīng)高度
IE6、IE7、FF下DIV自適應(yīng)高度2010-05-13純CSS無(wú)hacks的跨游覽器自適應(yīng)高度多列布局 推薦
翻譯自Matthew James Taylor的Equal Height Columns with Cross-Browser CSS and No Hacks，有些部分根據(jù)我的理解改了，讓一些初心者更好理解。2009-11-12CSS解決未知高度的垂直水平居中自適應(yīng)問(wèn)題
今天有人問(wèn)起，晚上試著寫(xiě)出來(lái)，供參考； 以下代碼兼容主流瀏覽器IE6、IE7、Firefox、Opera。 從最簡(jiǎn)單的開(kāi)始………… 一、如何讓一個(gè)DIV水平居2009-04-04
CSS 實(shí)現(xiàn)高度自適應(yīng)鋪滿整屏的實(shí)現(xiàn)
這篇文章主要介紹了CSS 實(shí)現(xiàn)高度自適應(yīng)鋪滿整屏的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2020-11-23