CSS滚动条

程娘子攒钱陪伴

楚学友｜危机公关实战手册

把自己产品化 | 溜达

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

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

Sr.No.	Value & Remark
1	visible 默认值。内容不会被修剪，会呈现在元素框之外。
2	hidden 链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-scrollbars.html 来源：LearnFk无涯教程网内容会被修剪，并且其余内容是不可见的。
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>

它将产生以下输出-

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

教程推荐

大模型微调实践课 -〔赵鹏昊/李杰〕

结构思考力 · 透过结构看表达 -〔李忠秋〕

好记忆不如烂笔头。留下您的足迹吧 :)