DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏

<!DOCTYPE html

<html

<head

<meta charset="gb2312" /> 

<title>div滚动条 在线演示 www.divcss5.com</title

<style

.divcss5-a,.divcss5-b{ width:150px; height:100px; float:leftborder:1px solid #F00} 

.divcss5-b{ margin-left:10px;overflow-y:scroll; overflow-x:scroll;} 

/* css注释说明:设置第二个盒子与第一个盒子间距为10px,并设置了横纵滚动条样式 */ 

</style

</head

<body

<div class="divcss5-a">DIVCSS5测试内容,欢迎来到DIVCSS5学习DIV+CSS技术。大家可以通
过DIVCSS5主站上的所有免费CSS教程足可学会DIV CSS技术 - 如果需要深入系统学习、较短时间达到
理想学习效果可参加DIV+CSS培训班学习。</div

<div class="divcss5-b">DIVCSS5测试内容,欢迎来到DIVCSS5学习DIV+CSS技术。大家可以通
过DIVCSS5主站上的所有免费CSS教程足可学会DIV CSS技术 - 如果需要深入系统学习、较短时间达到
理想学习效果可参加DIV+CSS培训班学习。</div

</body

</html

显示效果见地址:http://www.divcss5.com/uploads/allimg/1309/1_130929144936_1.png

 

说明:第一个盒子“.divcss5-a”内容过多而溢出了DIV盒子,第二个盒子设置了滚动条样式,所以没有溢出,纵向右侧(Y)出现了可下拉上拉滚动条样式,

横向底部(X)出现滚动条效果但不可左右拉动,这是因为文字内容不能撑开DIV宽度,如果是大于DIV设置宽度的图片这样横向底部(X)就会出现滚动条效果。

滚动条属性: 
  overflow:auto为自动,yes为有,no为无 
  overflow-x:横向滚动条 
  overflow-y:纵向滚动条

posted @ 2017-02-13 16:30  py卡卡  阅读(935)  评论(0编辑  收藏  举报