（原）

首先有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. python入门踩坑

    问题1:ImportError: No module named requests 解决:一般报这种错误就是目前还没有这个方法的类库,需要下载或在升级类库.打开cmd命令,输入python -m pi ...

  2. Linux系统封装成iso文件

    #安装所需软件包yum -y install createrepo mkisofs anaconda-runtime 根据root下的install.log文件,得到安装的软件包awk '/Insta ...

  3. Java学习笔记-反射机制

    Java反射机制实在运行状态时,对于任意一个类,都能够知道这个类的属性和方法,对于任意一个对象,都能够调用他的任意一个属性和方法 获取Class对象的三种方式 Object类中的getClass()方 ...

  4. activeMQ(1)

    消息中间件 作用:解耦 削峰  异步 JMS编码总体架构: 一般代码流程 @Test public void test1(){ //创建连接工厂 ActiveMQConnectionFactory f ...

  5. layui 第三方组件 eleTree 树组件 树形选择器

    使用 JS位置 ,layui/lay/modules/eleTree.js:CSS位置 ,layui/css/modules/eleTree/eleTree.css: ## 下面应用即可页面css引用 ...

  6. 解MySQL基准测试和sysbench工具

    前言 作为一名后台开发,对数据库进行基准测试,以掌握数据库的性能情况是非常必要的.本文介绍了MySQL基准测试的基本概念,以及使用sysbench对MySQL进行基准测试的详细方法. 文章有疏漏之处, ...

  7. Nginx安装SSL证书，开启HTTPS加密

    效果就是访问博客的时候出现一把小绿锁,更加安(好)全(看). 实现步骤如下: 申请SSL证书 阿里云可以申请一年的免费证书,下载到本地 上传证书到服务器 scp [文件名] root@[ip地址]:/ ...

  8. NOIP模拟赛 打铁的匠 题解

    [问题描述] Mark Douglas是一名优秀的锻造师.与他优秀的锻造水平不相符,他非常穷,以至于很多好刀都因为缺少素材缺少资金无法打造. Mark把他有能力锻造的所有n种刀建成了一棵锻造树,除了第 ...

  9. Linux就该这么学——新手必须掌握的命令之系统状态检测命令组

    ifconfig命令 用途 : 获取网卡配置与网络状态等信息 格式 : ifconfig[网络设备][参数] 其实主要查看的就是网卡名称,inet参数后面的IP地址,ether参数后面的网卡物理地址( ...

  10. java进程CPU高分析

    JVM导致系统CPU高的常见场景: 内存不足,JVM gc频繁,一般会伴随OOMJVM某个线程死循环或者递归调用 定位和解决1.内存不足,gc频繁可参考我的这遍文章解决.https://blog.cs ...