（原）

首先有3个div，

第1个，固定大小是200*200（单位为px，下同）

第2个，不固定大小，其大小要用第3个div把个撑开，但是这个div必需要有滚动条，

第3个，固定大小与第1个div保持一致200*200

先上代码再解释：

<!DOCTYPE html>

<html>

<head>

	<title></title>

</head>

<body>

<div style="width: 200px;height: 200px; border: 5px solid red; position: relative;overflow: hidden;">

	<div id="abc" style="border: 5px solid green;overflow-x: hidden;overflow-y: scroll;position: absolute;">

		<div style="width: 200px;height: 200px;border: 5px solid blue;">

	123

	<br>

	123

	<br>

	<br>

	123

	<br>

	123

	<br>

	<br>

	123

	<br>

	123

	<br>

	123

	<br>

	123

	<br>

	<br>

	123

	<br>

	<br>

		</div>

	</div>

 </div> 

</body>

</html>

　　如图：

第1个div是红色边框，第2个是绿色，第3个是蓝色。

关键样式是第2个和第3个div上的。

第3个div宽的作用？

因为第2个div没有宽高，它的宽高都得依赖第3个div的，所以第3个div的宽200作用是为了保持和第1个div宽200一致，

此时的第2个div宽在firefox下为217（217=200+17），200为第3个div宽，17为firefox浏览器下滚动条宽（由于以上例图用了5的边框描边，所以宽度可能有所出入，这里暂时忽略）。

第2个div的217的宽度已经超过了第1个div的200，那么此时将第1个div的超出部分隐藏即可让滚动条不显示（overflow: hidden）

第3个div的高度为什么要为200呢？

因为第2个div的大小完全受第3个div大小控制，如果不为200是100，结果会是怎样的呢？

看图能明白 ，其实这个200是为了控制第3个div与第1个div高度一致用的，作用就是让滚动条的高度能和最外面第1个div的高度保持一致。

参考：https://www.cnblogs.com/alice626/p/6206760.html

div 可滚动但不显示滚动条的更多相关文章

  1. div内容溢出时显示滚动条

    在style中添加overflow:scroll属性即可.

  2. div 显示滚动条的CSS代码

    div 显示滚动条的CSS代码   div显示上下左右滚动条 <div style="width:260px;height:120px; overflow:scroll; border ...

  3. div 显示滚动条

    overflow-x:auto    显示横向滚动条 overflow-y:hidden 隐藏纵向滚动条 引用此class,只显示横向的滚动条 .max{ margin:auto; overflow- ...

  4. 限制div高度当内容多了溢出时显示滚动条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"content= ...

  5. div内容超出后自动显示滚动条

    一. <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽和高一定要设置噢,否则不 ...

  6. PC版模块滚动不显示滚动条效果

    以前对某个模块增加无滚动条的滚动效果,还需要找个插件才能实现,现在发现个简单方法,用普通的CSS就可以实现. 此方法只适用于不显示滚动条的滚动效果,如果需要自定义滚动条样式,还是需要插件来实现. HT ...

  7. Table显示滚动条

    Table显示滚动条,要先把table放到一个div中,div的长度和宽度要固定,控制overflow属性为scroll <div style="width:700px; height ...

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

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

  9. 如何让Table显示滚动条

    Table显示滚动条,要先把table放到一个div中,div的长度和宽度要固定,控制overflow属性为scroll <div style="width:700px; height ...

随机推荐

  1. CSP考试策略

    准备 带好手表,身份证,准考证,文具,和矿泉水(热水). 考试之前 如果时间比较充足,可以重启测试保护是否解开. 调整显示屏亮度,检查键盘.鼠标. 关掉拓展名隐藏. 写个简单程序测试是否有异常,测试对 ...

  2. sha256算法原理

    1. SHA256简介 SHA256是SHA-2下细分出的一种算法 SHA-2下又可再分为六个不同的算法标准 包括了:SHA-224.SHA-256.SHA-384.SHA-512.SHA-512/2 ...

  3. Linux下将用户添加到sudoers中

    Linux默认是没有将用户添加到sudoers列表中的,需要root手动将账户添加到sudoers列表中,才能让普通账户执行sudo命令. root 账户键入visudo即可进入sudo配置,这个命令 ...

  4. VMware HorizonView虚拟化桌面TLS问题处理

    问题描述 公司虚拟化桌面环境内,进出口事业部同事在使用"中国贸易单一窗口"登录系统时,其系统本地控件无法启动WSS服务,端口显示使用61231,并反复提示安装控件. 排查过程 首先 ...

  5. SQLite进阶-10.约束

    约束 约束是作用于数据表中列上的规则,用于限制表中数据的类型.约束的存在保证了数据库中数据的精确性和可靠性. 约束可以是列级或表级,列级约束作用于单一的列,而表级约束作用于整张数据表. SQLite中 ...

  6. java注解类型的aop

    import java.lang.reflect.Method; import javax.servlet.http.HttpServletRequest; import org.aspectj.la ...

  7. git链接远程库

    码云版本库使用流程 生成公钥 ssh-keygen -t rsa -c "码云申请邮箱" 添加公钥到本地 ssh-agent bash ssh-add ~/.ssh/id_rsa ...

  8. Python【print函数】

    下面是 print函数的一种用法,用逗号隔开,可在同一行打印不同类型的数据.x = input('请你输入被除数:')y = input('请你输入除数:')z = float(x)/float(y) ...

  9. MySQL之高级增删改查一

    一.select all/distinct 字段名/别名 from table where条件+[1]+[2]+[3]: where条件:>,<,≥,≤,like,between and( ...

  10. zabbix-自定义告警（二）

    实现自定义监控 文章引用:https://www.cnblogs.com/clsn/p/7885990.html#auto_id_28 一.实现自定义监控 说明zabbix自带模板Template O ...