html當中關于滾動條的設置-讓div內容超出后自動顯示滾動條

學習NO.1

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

overflow:auto  ；這個標簽的介紹

我們通過一個div來給大家講解下，
如果div中的內容超出后自動顯示滾動條的效果？最近在做項目中遇到這樣的一個問題，因為在彈框中的內容太多，彈框的大小固定，超出的內容我們用滾動條的效果來解決。

問題一：怎么讓div內容超出后自動顯示滾動條

只需要用到css的一個overflow:auto的屬性就可以實現這效果了。下面我們看看代碼和實現的效果。

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

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

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

可以設置：overflow-x:scroll,或者：overflow-y:hidden即可實現這個效果。

同理如果overflow-y:scroll或者：overflow-x:hidden是只顯示豎的滾動條，不顯示橫向的滾動條。提示：如果設置橫向滾動條的時候，一直不顯示橫向拉的那個條是因為你的內容還不足以讓它顯示出來，如果是文字的話，它自動換行了，所以就不顯示，當設置white-space:nowrap；（不換行）的時候，內容超出就會出現。

關于overflow的其他屬性的介紹：

overflow 一共有5個屬性。

1、overflow:auto  ；內容會被修剪，超出設置的寬高后會出現滾動條

2、overflow:scroll;內容會被修剪，不管內容是否超出，都會出現滾動條的位置

3、overflow:visible;這個是默認值，內容不會被修剪，會出現在元素框外面。

4、overflow:hidden;內容被修剪，多余的內容被隱藏

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

關于html的滾動條問題，請看另外一篇文章
html當中div如何自適應增加滾動條的具體方法

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