div設定滾動條

2021-08-20 03:35:39 字數 721 閱讀 6498

**小結**

在html中,怎麼使div中的內容超出後自動顯示滾動條的效果?最近在做專案中遇到這樣的乙個問題,因為在彈框中的內容太多,彈框的大小固定,超出的內容我們用滾動條的效果來解決。

怎麼讓div內容超出後自動顯示滾動條,只需要用到css的乙個overflow:auto的屬性就可以實現這效果了。

在外部的div的class裡面設定:overflow:auto即可。先要給定要設定出現滾動條div的寬高,內容超出給定的寬高之後,即可出現滾動條效果。

##滾動條一直存在

如果你想讓滾動條自始至終都存在,而不僅僅是內容超出後才出現,可以用overflow:scroll屬性

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

同理如果overflow-y:scroll或者:overflow-x:hidden是只顯示豎的滾動條,不顯示橫向的滾動條。

overflow的屬性

1、overflow:auto ;內容會被修剪,超出設定的寬高後會出現滾動條

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

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

4、overflow:hidden;內容被修剪,多餘的內容被隱藏

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

DIV滾動條設定

所謂div滾動條,就是利用div標籤,在裡面嵌入css樣式表,加入overflow的屬性值,這樣,當div所規範的區域內的內容達到一定程式時,滾動條就派上用場。其功能大約是為了節約頁面空間,就是所謂的 縮地 了。看看效果如何吧,在下一樓提供。參考核心 滾動條相關顏色屬性 face color 滑塊顏...

DIV滾動條設定

當div所定義的區域的內容達到一定程度時,在div標籤裡面嵌入css樣式表,定義overflow的屬性值,設定滾動條相關的屬性。注 1.overflow visible 卻省值,沒有滾動條,根據內容自動擴撐區域的大小,即定義的區域無效 scroll 總是顯示滾動條 hidden 沒有滾動條,超出區域...

設定div滾動條

這個是很常見的乙個任務了,基本是通過css去實現滾動條。滾動條 設定是否顯示滾動條主要是在css中設定下列的屬性 如下 overflow visible auto hidden scroll overflow x 橫向滾動條 overflow y 縱向滾動條 引數的意義 visible 不剪下內容也...