在實際操作過程中我們知道,很多DIV都是不夠顯示全部的內容,那麼一定就要設置滾動條,今天就來教大家DIV的滾動條設定。
對div設定捲軸,設定其橫向捲軸和縱向捲軸樣式。所需CSS樣式為overflow-y和overflow-x來設定div盒子物件右側和底部捲軸效果。同時也可以使用CSS樣式設定html框架iframe的捲軸隱藏,接下來要為大家介紹。
一、CSS基礎認知 - TOP
#overflow-y:scroll; 總是顯示縱向捲軸
overflow-y: visible : 不剪下內容也不增加縱向捲軸
了解:overflow-y手冊http://www.divcss5.com/shouce/c_overflowy.shtml
overflow-x:scroll ; 總是顯示橫向捲軸
overflow-x:visible : 不剪下內容也不新增橫向捲軸
了解:overflow-x手冊http://www.divcss5.com /shouce/c_overflowx.shtml
了解css overflow
#二、div設定捲軸實例
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>div滚动条 在线演示 www.divcss5.com</title> <style> .divcss5-a,.divcss5-b{ width:150px; height:100px; float:left; border:1px solid #F00} .divcss5-b{ margin-left:10px;overflow-y:scroll; overflow-x:scroll;} /* css注释说明:设置第二个盒子与第一个盒子间距为10px,并设置了横纵滚动条样式 */ </style> </head> <body> <div class="divcss5-a">哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈 哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈 哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊</div> <div class="divcss5-b">哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈 哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈 哈哈哈哈啊哈哈哈哈哈哈啊哈哈哈哈哈哈啊</div> </body> </html>
以上是DIV怎麼設定捲軸的詳細內容。更多資訊請關注PHP中文網其他相關文章!