CSS - 滚动条

在某些情况下，元素的内容可能大于分配给它的空间量。例如，给定的宽度和高度属性不允许有足够的空间来容纳元素的内容。

CSS 提供了一个名为“overflow”的属性，它告诉浏览器如果框的内容大于框本身该怎么办。该属性可以采用以下值之一 -

先生。 价值与描述
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>

它将产生以下结果 -