（原）

首先有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. 【VS开发】CListCtrl控件使用

    为何调用了CListCtrl的InsertColumn却什么效果都没有?这个问题以前发现过,今天才清楚,那就是要把它的Style指定为LVS_REPORT.       具体做法如下:       假 ...

  2. 第10课.c++的新成员

    1.动态内存分配 a.c++中通过new关键字进行动态内存申请 b.c++中的动态内存申请是基于类型进行的 c.delete关键字用于内存释放 2.new关键字与malloc函数的区别 a.new关键 ...

  3. [转帖]SSH原理与运用（一）：远程登录

    http://www.ruanyifeng.com/blog/2011/12/ssh_remote_login.html 写的很好.. 自己才简单明白了一点东西.. SSH是每一台Linux电脑的标准 ...

  4. 创建Sqoop作业,报错Exception in thread "main" java.lang.NoClassDefFoundError: org/json/JSONObject

    WARN tool.BaseSqoopTool: Setting your password on the command-line is insecure. Consider using -P in ...

  5. 项目四：Java秒杀系统方案优化-高性能高并发实战

    技术栈 前端:Thymeleaf.Bootstrap.JQuery 后端:SpringBoot.JSR303.MyBatis 中间件:RabbitMQ.Redis.Druid 功能模块 分布式会话,商 ...

  6. 基于licode搭建webrtc服务器

    0. 前言 licode官网文档安装教程十分简单, 但是实际搭建过程是很艰辛的. 官方文档没有提示说会遇到什么样的问题, 实际过程中可能遇到各种各样的问题, 在解决的时候费时费力, 我就总结一下自己在 ...

  7. Tornado WebSocket简单聊天

    Tornado实现了对socket的封装:tornado.web.RequestHandler 工程目录: 1.主程序 manage.py import tornado.web import torn ...

  8. php面试相关整理

    1.HTTP Keep-Alive的作用 作用:Keep-Alive:使客户端到服务器端的连接持续有效,当出现对服务器的后继请求时,Keep-Alive功能避免了建立或者重新建立连接.Web服务器,基 ...

  9. LeetCode 160——相交链表（JAVA）

    编写一个程序,找到两个单链表相交的起始节点. 如下面的两个链表: 在节点 c1 开始相交. 示例 1: 输入:intersectVal = 8, listA = [4,1,8,4,5], listB ...

  10. CNN中卷积层 池化层反向传播

    参考:https://blog.csdn.net/kyang624823/article/details/78633897 卷积层 池化层反向传播: 1,CNN的前向传播 a)对于卷积层,卷积核与输入 ...