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

DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏的更多相关文章

  1. Jquery 动态交换两个div位置并添加Css动画效果

    前端网页开发中我们经常会遇到需要动态置换两个DIV元素的位置,常见的思路大多是不考虑原始位置,直接采用append或者appendTo方式将两元素进行添加,该法未考虑原始位置,仅会添加为元素的最后一子 ...

  2. 在 IE 浏览器中，使用 bootstrap 使得页面滚动条浮动显示，自动隐藏，自动消失

    貌似是从 IE10 开始?为了触屏操作优化浏览器的内容显示,IE 浏览器提供了一种可以浮动显示,自动隐藏的滚动条样式,但是这个样式会在某些情况下造成一些困扰,比如下图... 其实默认情况下,桌面版的 ...

  3. S7-300 与TP900 组态 棒图 量表 滚动条 滚动条设置的值通过IO输出域显示出来

    切换编程语言 注意 一定要 先选中 某一个组织块 例如 OB1 然后单击 菜单 编辑 切换编程语言 组态 300 PLC 的CPU 点击 SIMENSE LOGO 查看 循环 中断 OB35 可以 在 ...

  4. 044. asp.net主题之二为主题添加CSS样式和动态加载主题

    1. 新建任意一个网站, 默认主页为Default.aspx, 增加一个App_Themes目录, 用于存储主题, 添加一个MyTheme的主题, 在MyTheme主题下添加一个样式表文件, 默认名称 ...

  5. css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

    我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以 ...

  6. extjs combobox 设置下拉时显示滚动条 设置显示条数

    extjs在点击下拉时如果没有限制它的高度,那么它的默认最大高度是300,显示的时候就会显示300的高度,知道选项内容超过这个高度时才会自动显示滚动条,往往在有些时候我们希望让combobox显示一个 ...

  7. 功能整合（一）：滚动条的变相隐藏、js控制div的渐变显示、滚动条监听

    1.滚动条的变相隐藏 思路: 1.  把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2.  然后把最外层的div的宽设置的比body的宽宽一点,把d ...

  8. div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法（借鉴）

    原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度, ...

  9. CSS3或CSS+JS实现改变滚动条样式(兼容所有浏览器)

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 16px; /*滚动条宽度*/ height: 16px; /*滚动条高度*/ } ...

随机推荐

  1. day03 爬虫基础

    一.爬虫原理1.互联网:由一堆网络设备把一台台计算机互联到一起称之为互联网2.互联网建立的目的:传递与共享数据3.上网的全过程普通用户: 打开浏览器---->往目标站点发送请求---->获 ...

  2. java数据结构-05双向链表

    一.双向链式存储: ①简述:要是节点中包含两个指针部分,一个指向前驱元,一个指向后继元,Java中LinkedList集合类的实现就是双向链表 (以下图片为网络收集,侵删) ②特点:数据是非连续的,链 ...

  3. Shell脚本实现----Kubernetes单集群二进制部署

     Shell脚本实现----Kubernetes单集群二进制部署   搭建Kubernetes集群环境有以下三种方式: 1. Minikube安装方式Minikube是一个工具,可以在本地快速运行一个 ...

  4. 正则表达式小应用之对xml格式字符串每个字段加双引号

    通过Python对接口进行自动化后需要把xml格式的报文放到LoadRunner上进行压力测试,在pyCharm控制台打印出报文后,把报文放到LoadRunner中做了格式调整后,每个字段需要添加双引 ...

  5. MongoDB 监控 --- MongoDB基础用法（八）

    MongoDB 监控 在你已经安装部署并允许MongoDB服务后,你必须要了解MongoDB的运行情况,并查看MongoDB的性能.这样在大流量得情况下可以很好的应对并保证MongoDB正常运作. M ...

  6. STM32入门系列-GPIO概念介绍

    GPIO(general purpose intput output)是通用输入输出端口的简称,可以通过软件来控制其输入和输出.STM32 芯片的 GPIO 引脚与外部设备连接起来,从而实现与外部通讯 ...

  7. NB-IoT的RLC子层服务功能

    NB-IoT只支持RLC子层的确认模式(Acknowledgement Mode,AM),不支持非确认模式(Unacknowledged Mode,UM). 对于支持UP模式的UE,NB-IoT支持R ...

  8. JMeter实战(三) 界面使用

    JMeter 有 2 种运行方式,一种是 CLI,一种是 GUI,本篇文章就来介绍一下后者,图形用户界面,因为后续文章大部分都是基于 GUI 的. 本文演示的是英文版,想用中文的同学可以在菜单栏点击 ...

  9. 如何快速在windows上创建你的第一个odoo项目

    一.什么是Odoo Odoo 是一系列开源商业应用程序套装(ERP企业管理系统),此套装可满足贵公司的一切应用需求,例如,企业基本的进销存.采购.销售.MRP生产制造.品保质量保障.企业招聘.员工合同 ...

  10. adb、package及activity

    1.   adb adb连接手机参考:https://www.cnblogs.com/mind18/p/12592252.html,中的三.5节 1.1.  adb介绍 ADB全名Andorid De ...