html當(dāng)中關(guān)于滾動條的設(shè)置-讓div內(nèi)容超出后自動顯示滾動條

學(xué)習(xí)NO.1

在html中，我們經(jīng)�？吹疥P(guān)于一個(gè)頁面，如果內(nèi)容很多的話，是會有滾動條出現(xiàn)的，今天道勤的一個(gè)馬爾代夫的朋友問小編，關(guān)于滾動條的內(nèi)容，今天小編給大家講下這個(gè)方面的內(nèi)容;其實(shí)也比較簡單，無非也就是

overflow:auto  ；這個(gè)標(biāo)簽的介紹

我們通過一個(gè)div來給大家講解下，
如果div中的內(nèi)容超出后自動顯示滾動條的效果？最近在做項(xiàng)目中遇到這樣的一個(gè)問題，因?yàn)樵趶椏蛑械膬?nèi)容太多，彈框的大小固定，超出的內(nèi)容我們用滾動條的效果來解決。

問題一：怎么讓div內(nèi)容超出后自動顯示滾動條

只需要用到css的一個(gè)overflow:auto的屬性就可以實(shí)現(xiàn)這效果了。下面我們看看代碼和實(shí)現(xiàn)的效果。

這次我做的是在一個(gè)div里面嵌套的div里實(shí)現(xiàn)的滾動條效果，如果你想讓外部的div顯示滾動條效果，只需在外部的div的class里面設(shè)置：overflow:auto即可。先要給定要設(shè)置出現(xiàn)滾動條div的寬高，內(nèi)容超出給定的寬高之后，即可出現(xiàn)滾動條效果。

延伸：overflow:scroll.如果你想讓滾動條自始至終都存在，而不僅僅是內(nèi)容超出后才出現(xiàn)，可以用overflow:scroll屬性。如下圖所示：（如果內(nèi)容還未超過設(shè)置的寬高，那么不會顯示下拉的那個(gè)條）

問題二：怎么只顯示橫向的滾動條？

可以設(shè)置：overflow-x:scroll,或者：overflow-y:hidden即可實(shí)現(xiàn)這個(gè)效果。

同理如果overflow-y:scroll或者：overflow-x:hidden是只顯示豎的滾動條，不顯示橫向的滾動條。提示：如果設(shè)置橫向滾動條的時(shí)候，一直不顯示橫向拉的那個(gè)條是因?yàn)槟愕膬?nèi)容還不足以讓它顯示出來，如果是文字的話，它自動換行了，所以就不顯示，當(dāng)設(shè)置white-space:nowrap；（不換行）的時(shí)候，內(nèi)容超出就會出現(xiàn)。

關(guān)于overflow的其他屬性的介紹：

overflow 一共有5個(gè)屬性。

1、overflow:auto  ；內(nèi)容會被修剪，超出設(shè)置的寬高后會出現(xiàn)滾動條

2、overflow:scroll;內(nèi)容會被修剪，不管內(nèi)容是否超出，都會出現(xiàn)滾動條的位置

3、overflow:visible;這個(gè)是默認(rèn)值，內(nèi)容不會被修剪，會出現(xiàn)在元素框外面。

4、overflow:hidden;內(nèi)容被修剪，多余的內(nèi)容被隱藏

5、overflow:inherit;從父元素那里繼承overflow的值。

關(guān)于html的滾動條問題，請看另外一篇文章
html當(dāng)中div如何自適應(yīng)增加滾動條的具體方法

道勤主機(jī)提供365天*24小時(shí)全年全天無休、實(shí)時(shí)在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過程中所遇到的一切問題! 如果您是道勤主機(jī)用戶，那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費(fèi)電話、后臺提交工單這些方式聯(lián)系道勤主機(jī)客服！ 如果您不是我們的客戶也沒問題，點(diǎn)擊頁面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購買后，我們?yōu)槟�免費(fèi)進(jìn)行無縫搬家服務(wù)，讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機(jī)的服務(wù)！