div 可滚动但不显示滚动条

最新推荐文章于 2024-05-08 10:05:10 发布

weixin_33887443

最新推荐文章于 2024-05-08 10:05:10 发布

阅读量6.1k

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/LeeScofiled/p/10931845.html

版权

（原）

首先有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

转载于:https://www.cnblogs.com/LeeScofiled/p/10931845.html

weixin_33887443

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
div 可滚动但不显示滚动条

（原）首先有3个div，第1个，固定大小是200*200（单位为px，下同）第2个，不固定大小，其大小要用第3个div把个撑开，但是这个div必需要有滚动条，第3个，固定大小与第1个div保持一致200*200先上代码再解释：<!DOCTYPE html><html><head> <title></tit...
复制链接

扫一扫