怎么让div内容超出后自动显示滚动条 - 欢欢ta爸

时间:2024-02-15 15:32:41

怎么让div内容超出后自动显示滚动条

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

怎么让div内容超出后自动显示滚动条
 

方法/步骤

 
  1.  

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

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

  2.  

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

    怎么让div内容超出后自动显示滚动条
    怎么让div内容超出后自动显示滚动条
  3.  

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

    怎么让div内容超出后自动显示滚动条
  4.  

    问题二:怎么只显示横向的滚动条?

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

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

    怎么让div内容超出后自动显示滚动条
    怎么让div内容超出后自动显示滚动条
  5.  

    关于overflow的其他属性的介绍:

    overflow 一共有5个属性。

    1、overflow:auto  ;内容会被修剪,超出设置的宽高后会出现滚动条

    2、overflow:scroll;内容会被修剪,不管内容是否超出,都会出现滚动条的位置

    3、overflow:visible;这个是默认值,内容不会被修剪,会出现在元素框外面。

    4、overflow:hidden;内容被修剪,多余的内容被隐藏

    5、overflow:inherit;从父元素那里继承overflow的值。