立即注册 找回密码

QQ登录

只需一步,快速开始

查看: 4945|回复: 0

[Html 教程] html当中关于滚动条的设置-让div内容超出后自动显示滚动条

[复制链接]
发表于 2018-1-6 02:39:00 | 显示全部楼层 |阅读模式
道勤网-数据www.daoqin.net

亲注册登录道勤网-可以查看更多帖子内容哦!(包涵精彩图片、文字详情等)请您及时注册登录-www.daoqin.net

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 学习NO.1 于 2018-1-6 02:51 编辑

html中,我们经常看到关于一个页面,如果内容很多的话,是会有滚动条出现的,今天道勤的一个马尔代夫的朋友问小编,关于滚动条的内容,今天小编给大家讲下这个方面的内容;其实也比较简单,无非也就是
overflow:auto  ;这个标签的介绍

我们通过一个div来给大家讲解下,
如果div中的内容超出后自动显示滚动条的效果?最近在做项目中遇到这样的一个问题,因为在弹框中的内容太多,弹框的大小固定,超出的内容我们用滚动条的效果来解决。

html当中关于滚动条的设置-让div内容超出后自动显示滚动条

html当中关于滚动条的设置-让div内容超出后自动显示滚动条

问题一:怎么让div内容超出后自动显示滚动条
只需要用到css的一个overflow:auto的属性就可以实现这效果了。下面我们看看代码和实现的效果。
这次我做的是在一个div里面嵌套的div里实现的滚动条效果,如果你想让外部的div显示滚动条效果,只需在外部的div的class里面设置:overflow:auto即可。先要给定要设置出现滚动条div的宽高,内容超出给定的宽高之后,即可出现滚动条效果。

html当中关于滚动条的设置-让div内容超出后自动显示滚动条

html当中关于滚动条的设置-让div内容超出后自动显示滚动条

html当中关于滚动条的设置-让div内容超出后自动显示滚动条

html当中关于滚动条的设置-让div内容超出后自动显示滚动条
延伸:overflow:scroll.如果你想让滚动条自始至终都存在,而不仅仅是内容超出后才出现,可以用overflow:scroll属性。如下图所示:(如果内容还未超过设置的宽高,那么不会显示下拉的那个条)

html当中关于滚动条的设置-让div内容超出后自动显示滚动条

html当中关于滚动条的设置-让div内容超出后自动显示滚动条
问题二:怎么只显示横向的滚动条?
可以设置:overflow-x:scroll,或者:overflow-y:hidden即可实现这个效果。
同理如果overflow-y:scroll或者:overflow-x:hidden是只显示竖的滚动条,不显示横向的滚动条。提示:如果设置横向滚动条的时候,一直不显示横向拉的那个条是因为你的内容还不足以让它显示出来,如果是文字的话,它自动换行了,所以就不显示,当设置white-space:nowrap;(不换行)的时候,内容超出就会出现。

html当中关于滚动条的设置-让div内容超出后自动显示滚动条

html当中关于滚动条的设置-让div内容超出后自动显示滚动条

html当中关于滚动条的设置-让div内容超出后自动显示滚动条

html当中关于滚动条的设置-让div内容超出后自动显示滚动条
关于overflow的其他属性的介绍:
overflow 一共有5个属性。
1、overflow:auto  ;内容会被修剪,超出设置的宽高后会出现滚动条
2、overflow:scroll;内容会被修剪,不管内容是否超出,都会出现滚动条的位置
3、overflow:visible;这个是默认值,内容不会被修剪,会出现在元素框外面。
4、overflow:hidden;内容被修剪,多余的内容被隐藏
5、overflow:inherit;从父元素那里继承overflow的值。
关于html的滚动条问题,请看另外一篇文章
html当中div如何自适应增加滚动条的具体方法


道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户,那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信:q792472177免费电话、后台提交工单这些方式联系道勤主机客服! 如果您不是我们的客户也没问题,点击页面最右边的企业QQ在线咨询图标联系我们并购买后,我们为您免费进行无缝搬家服务,让您享受网站零访问延迟的迁移到道勤主机的服务!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

道勤网- 推荐内容!上一条 /2 下一条

!jz_fbzt! !jz_sgzt! !jz_xgzt! 快速回复 !jz_fhlb! !jz_lxwm! !jz_gfqqq!

关于我们|手机版|小黑屋|地图|【道勤网】-www.daoqin.net 软件视频自学教程|免费教程|自学电脑|3D教程|平面教程|影视动画教程|办公教程|机械设计教程|网站设计教程【道勤网】 ( 皖ICP备15000319号-1 )

GMT+8, 2024-10-7 09:11

Powered by DaoQin! X3.4 © 2016-2063 Dao Qin & 道勤科技

快速回复 返回顶部 返回列表