（原）

首先有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. Linux核心系统命令

    关机,重启: shutdown -h now:关机 shutdown -r now:重启 文件和目录操作命令: pwd:显示当前所在路径 cd:切换目录 cd - :切换到上一次所在路径 cd ~:切 ...

  2. css 移动端1px更细

    1.最近写项目经常遇到4个入口菜单放在一行,然后加border:1px 在移动端显示却很粗,如下图: <div class="header"> <div clas ...

  3. java使用validator进行校验

    不管是html页面表单提交的对象数据还是和第三方公司进行接口对接,都需要对接收到的数据进行校验(非空.长度.格式等等).如果使用if一个个进行校验(字段非常多),这是让人崩溃的过程.幸好jdk或hib ...

  4. VirtualBox本地虚拟机常见问题

    SSH连接本地虚拟机配置 https://www.jianshu.com/p/d59ed9f226d1 开启双向复制https://blog.csdn.net/wcx1293296315/articl ...

  5. sysbench压力测试工具简介

    一.sysbench压力测试工具简介: sysbench是一个开源的.模块化的.跨平台的多线程性能测试工具,可以用来进行CPU.内存.磁盘I/O.线程.数据库的性能测试.目前支持的数据库有MySQL. ...

  6. Git--上手Github

    1.创建远程仓库 无论在之后的第二步你是想从本地到远程还是远程到本地,创建远程仓库是第一步肯定的.(推荐克隆本地,然后把本地的代码拷入,然后add push) 因为clone ,github会帮忙创建 ...

  7. DOS ftp

    C:\>ftp /? 将文件传送到运行 FTP 服务器服务(经常称为后台程序)的计算机以及将文件从该计算机传出.可以交互使用 Ftp. FTP [-v] [-d] [-i] [-n] [-g] ...

  8. 虚拟机(Vmware)安装ubuntu18.04和配置调整（一）

    一.虚拟机(Vmware)安装ubuntu18.04 1.下载ubuntu18.04桌面版镜像文件< ubuntu-18.04.3-desktop-amd64.iso> 2.使用VMwar ...

  9. django 聚合统计查询

    from django.shortcuts import renderfrom django.http import HttpResponsefrom django.db.models import ...

  10. day03-04

    光驱 历史的东西 远程管理卡 ​ 它的作用是通过网络远程(异地)开关服务器,并可以查看服务器开关的过程等信息,早期(2010年以前),服务器托管在IDC机房,出问题,还得跑机房或者请机房的人管理,有了 ...