（原）

首先有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. C++进阶笔记

    思想原则: 以类为例,类最终要处理的是数据,方法只是过程,最终要改变的是private中的数据成员状态.程序设计也是如此,要的是数据. 一.const的作用 const定义变量:定义了一个不可修改的常 ...

  2. phpstorm设置的快捷键突然失效了，提示： IdeaVim ...

    下班后,打开PHPstorm,突然感觉不对,经常用的快捷键突然用不了. 例如按了 Ctrl+F 快捷键后,提示:  IdeaVim! Using the Ctrl+F shortcut for Vim ...

  3. gzip压缩配置

    gzip on;gzip_buffers 32 4K;gzip_comp_level 6;gzip_min_length 200;gzip_types text/css text/xml applic ...

  4. JS 获取当前定位

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. sshpass和做软链接

    参考: https://help.aliyun.com/document_detail/54530.html?spm=5176.11065259.1996646101.searchclickresul ...

  6. 2019牛客暑期多校训练营（第九场）-D Knapsack Cryptosystem （折半搜索）

    题目链接:https://ac.nowcoder.com/acm/contest/889/D 题意:题意简单,从大小为36的集合中选若干元素使得他们的和为sum. 思路:第一感觉用搜索,复杂度为2^3 ...

  7. Linux常用安装配置

    一.创建.删除.分组 创建用户 命令:useradd  用户名 或    adduser 用户名 注意:只有root用户才能创建新用户 例如,创建一个名为zhangsan的用户 使用passwd命令为 ...

  8. 怎么将本地项目放到码云(gitee)上面？图文详解

    git的好处什么的,在此就不多赘述.现在很多公司都在用git了. 那么怎么将本地已经有的项目放到码云(gitee)上呢? 前置条件说明: 1:原来项目所在位置:D:\workspace01\class ...

  9. PDO简单的DB类封装

    <?php class DB{ private $dbs = ""; private $fields = "*"; private $tables = n ...

  10. python-open函数操作实例

    一.这个是源配置文件: global               log 127.0.0.1 local2        daemon        maxconn 256        log 12 ...