css實(shí)現(xiàn)div自動(dòng)添加滾動(dòng)條(圖片或文字等超出時(shí)顯示)
發(fā)布時(shí)間：2013-01-25 11:47:06 作者：佚名 
我要評(píng)論
我要評(píng)論css實(shí)現(xiàn)div自動(dòng)添加滾動(dòng)條比較實(shí)用的功能，當(dāng)圖片或文字超出div所規(guī)定的寬或高時(shí)，會(huì)自動(dòng)出現(xiàn)滾動(dòng)條，這一點(diǎn)還是比較有利于用戶體驗(yàn)的，本文整理了一些實(shí)現(xiàn)自動(dòng)滾動(dòng)條的方法，感興趣的朋友不妨參考下，或許對(duì)你認(rèn)識(shí)css設(shè)置滾動(dòng)條有所幫助
原來用過，沒有太在意，最近又用到。記下方便以后用。
<div style='border:0px;padding:3px; PADDING:0px; width:200px; height:480px; LINE-HEIGHT: 20px; OVERFLOW: auto; '></div>
語(yǔ)法：
overflow : visible | auto | hidden | scroll ;
參數(shù)：
1.visible :不剪切內(nèi)容也不添加滾動(dòng)條。假如顯式聲明此默認(rèn)值，對(duì)象將被剪切為包含對(duì)象的window或frame的大小。并且clip屬性設(shè)置將失效
2.auto :此為body對(duì)象和textarea的默認(rèn)值。在需要時(shí)剪切內(nèi)容并添加滾動(dòng)條
3.hidden :不顯示超過對(duì)象尺寸的內(nèi)容
4.scroll :總是顯示滾動(dòng)條
說明：
檢索或設(shè)置當(dāng)對(duì)象的內(nèi)容超過其指定高度及寬度時(shí)如何管理內(nèi)容。
設(shè)置textarea對(duì)象為hidden值將隱藏其滾動(dòng)條。
對(duì)于table來說，假如table-layout屬性設(shè)置為fixed，則td對(duì)象支持帶有默認(rèn)值為hidden的overflow屬性。如果設(shè)為hidden，scroll或者auto，那么超出td尺寸的內(nèi)容將被剪切。如果設(shè)為visible，將導(dǎo)致額外的文本溢出到右邊或左邊（視direction屬性設(shè)置而定）的單元格。
自IE5開始，此屬性在MAC平臺(tái)上可用。
對(duì)應(yīng)的腳本特性為overflow。
示例：
div { overflow: scroll; height: 100px; width: 100px; }
復(fù)制代碼
代碼如下:<div style='border:0px;padding:3px; PADDING:0px; width:200px; height:480px; LINE-HEIGHT: 20px; OVERFLOW: auto; '></div>
語(yǔ)法：
overflow : visible | auto | hidden | scroll ;
參數(shù)：
1.visible :不剪切內(nèi)容也不添加滾動(dòng)條。假如顯式聲明此默認(rèn)值，對(duì)象將被剪切為包含對(duì)象的window或frame的大小。并且clip屬性設(shè)置將失效
2.auto :此為body對(duì)象和textarea的默認(rèn)值。在需要時(shí)剪切內(nèi)容并添加滾動(dòng)條
3.hidden :不顯示超過對(duì)象尺寸的內(nèi)容
4.scroll :總是顯示滾動(dòng)條
說明：
檢索或設(shè)置當(dāng)對(duì)象的內(nèi)容超過其指定高度及寬度時(shí)如何管理內(nèi)容。
設(shè)置textarea對(duì)象為hidden值將隱藏其滾動(dòng)條。
對(duì)于table來說，假如table-layout屬性設(shè)置為fixed，則td對(duì)象支持帶有默認(rèn)值為hidden的overflow屬性。如果設(shè)為hidden，scroll或者auto，那么超出td尺寸的內(nèi)容將被剪切。如果設(shè)為visible，將導(dǎo)致額外的文本溢出到右邊或左邊（視direction屬性設(shè)置而定）的單元格。
自IE5開始，此屬性在MAC平臺(tái)上可用。
對(duì)應(yīng)的腳本特性為overflow。
示例：
復(fù)制代碼
代碼如下:div { overflow: scroll; height: 100px; width: 100px; }
相關(guān)文章
純div+css實(shí)現(xiàn)的固定在網(wǎng)站底部不隨網(wǎng)站滾動(dòng)的在線客服特效源碼
本款是一段由純div+css代碼是實(shí)現(xiàn)的將在線客服功能控制在網(wǎng)站底部不隨網(wǎng)頁(yè)滾動(dòng)條滾動(dòng)而改變位置的特效源碼，運(yùn)行流暢，反應(yīng)速度靈敏，是一段非常優(yōu)秀的特效源碼2014-10-27CSS控制DIV永遠(yuǎn)固定在頁(yè)面底部不隨滾動(dòng)而滾動(dòng)
控制DIV永遠(yuǎn)固定在頁(yè)面底部的方法有很多，基本上都是通過css或js來實(shí)現(xiàn)的，本節(jié)也實(shí)現(xiàn)了一個(gè)這樣的效果，大家可以學(xué)習(xí)下2014-06-03- 使用CSS樣式設(shè)置div滾動(dòng)條，直接充當(dāng)了文本框的角色，下面為大家介紹下具體的實(shí)現(xiàn)，感興趣的朋友可以參考下2013-12-24
css將div層固定顯示在頁(yè)面底部不隨滾動(dòng)條滾動(dòng)
將div層固定顯示在頁(yè)面底部，在某些情況下還是很實(shí)用的，在本文為大家介紹下使用css是如何實(shí)現(xiàn)的，需要的碰可以參考下2013-11-20div css 滾動(dòng)條樣式 DIV滾動(dòng)條屬性及樣式設(shè)置方式
所謂DIV滾動(dòng)條，就是利用DIV標(biāo)簽，在里面嵌入CSS樣式表，加入overflow的屬性值，這樣，當(dāng)div所規(guī)范的區(qū)域內(nèi)的內(nèi)容達(dá)到一定程序時(shí)，滾動(dòng)條就派上用場(chǎng),這里為你介紹DIV滾動(dòng)條2012-12-23css 給div添加滾動(dòng)并隱藏滾動(dòng)條
這篇文章主要介紹了css 給div添加滾動(dòng)并隱藏滾動(dòng)條的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-09
