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

顺晟科技

2022-09-15 21:10:38

266

<!DOCTYPE html>

<html>

<head>

<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">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：纵向滚动条

网站建设