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

学习NO.1

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

overflow:auto  ；这个标签的介绍

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

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

问题一：怎么让div内容超出后自动显示滚动条

只需要用到css的一个overflow:auto的属性就可以实现这效果了。下面我们看看代码和实现的效果。

这次我做的是在一个div里面嵌套的div里实现的滚动条效果，如果你想让外部的div显示滚动条效果，只需在外部的div的class里面设置：overflow:auto即可。先要给定要设置出现滚动条div的宽高，内容超出给定的宽高之后，即可出现滚动条效果。

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

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

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

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

问题二：怎么只显示横向的滚动条？

可以设置：overflow-x:scroll,或者：overflow-y:hidden即可实现这个效果。

同理如果overflow-y:scroll或者：overflow-x:hidden是只显示竖的滚动条，不显示横向的滚动条。提示：如果设置横向滚动条的时候，一直不显示横向拉的那个条是因为你的内容还不足以让它显示出来，如果是文字的话，它自动换行了，所以就不显示，当设置white-space:nowrap；（不换行）的时候，内容超出就会出现。

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在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！