CSS - 滚动条

可能存在元素的内容可能大于分配给它的空间量的情况.例如,给定的宽度和高度属性不允许足够的空间容纳元素的内容.

CSS提供了一个名为 overflow 的属性,告诉浏览器什么如果框的内容大于框本身,则执行此操作.此属性可以采用以下值之一 :

Sr.No.价值&说明
1

可见

允许内容溢出其包含元素的边框.

2

隐藏

内容嵌套元素只是在包含元素的边框处被截断,并且没有可见的滚动条.

3

滚动

包含元素的大小不会改变,但是添加滚动条以允许用户滚动查看内容.

4

自动

目的与滚动相同,但滚动条仅在以下情况下显示:内容确实溢出.

这是一个例子 :

<html>
   <head>
      <style type = "text/css">
         .scroll {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:scroll;
         }
         .auto {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:auto;
         }
      </style>
   </head>

   <body>
      <p>Example of scroll value:</p>
      <div class = "scroll">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
      <br />
      
      <p>Example of auto value:</p>
      
      <div class = "auto">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
   </body>
</html>