滚动条（Scrollbars）

优质

小牛编辑

129浏览

2023-12-01

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

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

Sr.No.	价值和描述
1	visible 允许内容溢出其包含元素的边框。
2	hidden 嵌套元素的内容只是在包含元素的边界处被截断，并且没有可见的滚动条。
3	scroll 包含元素的大小不会更改，但会添加滚动条以允许用户滚动以查看内容。
4	auto 其目的与滚动相同，但仅当内容溢出时才会显示滚动条。

这是一个例子 -

<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>