站長(zhǎng)資訊網(wǎng)div 添加滾動(dòng)條只需要指定 overflow 屬性為 auto 即可，以下實(shí)例設(shè)置了 div 水平滾動(dòng)條：
實(shí)例
<div style="height:300px;width:70px;overflow:auto;background:#EEEEEE;"> 菜鳥(niǎo)教程 — 學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！ 菜鳥(niǎo)教程 — 學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！ 菜鳥(niǎo)教程 — 學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！ 菜鳥(niǎo)教程 — 學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！ </div>
嘗試一下 ?
寬度(width)和高度(height)可以根據(jù)實(shí)際需要來(lái)設(shè)定。
以上實(shí)例表示如果 div 內(nèi)容的高度大于 300px 就會(huì)出現(xiàn)垂直滾動(dòng)條，小于 300px 就沒(méi)有滾動(dòng)條。如果寬度大于 70px 會(huì)出現(xiàn)水平滾動(dòng)條，小于就沒(méi)有。
如果你想在 div 中滾動(dòng)條是一直存在的則可以設(shè)置 overflow 屬性為 scroll：
你也可以將 overflow 設(shè)置為 scroll，即:
實(shí)例
<div style="height:300px;width:200px;overflow:scroll;background:#EEEEEE;"> 菜鳥(niǎo)教程 — 學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！ 菜鳥(niǎo)教程 — 學(xué)的不僅是技術(shù)，更是夢(mèng)想！?。?菜鳥(niǎo)教程 — 學(xué)的不僅是技術(shù)，更是夢(mèng)想?。。?菜鳥(niǎo)教程 — 學(xué)的不僅是技術(shù)，更是夢(mèng)想！?。?</div>
嘗試一下 ?
更多設(shè)置
只設(shè)置水平滾動(dòng)條：
<div style="width:100px;overflow-x:auto"></div>
只設(shè)置垂直滾動(dòng)條：
<div style="height:300px;overflow-y:auto"></div>
水平與垂直都設(shè)置：
<div style="width:70px;height:300px;overflow-x:auto;overflow-y:auto"></div>
更多文章可以參考：
CSS 布局 – Overflow
CSS overflow 屬性
