网站首页 > 知识剖析 正文
在网页的实际开发中,有时候需要给div标签元素添加一个滚动条(比如水平的或者垂直的滚动条),我们该怎么写css代码呢?
给div设置滚动条需要分成两步走:
一、设置步骤
1、设置div的高度以及宽度
如果不设置高度和宽度的话,内容多也不会出现滚动条,因为没有边界能让浏览器判断内容长度是否需要出现滚动条。
2、设置div的overflow属性,你可以设置成auto(水平和垂直都有),也可以单独设置overflow-x(水平滚动条),也可以单独设置overflow-y(垂直滚动条)。
二、实例说明
<div style="height:100px;width:300px;overflow:auto;background:#FFFFFF;">这里是迷糊笔记这里是迷糊笔记这里是迷糊笔记这里是迷糊笔记这里是迷糊笔记这里是迷糊笔记这里是迷糊笔记</div>
运行如下:
更多设置
只设置水平滚动条:
<div style="width:300px;overflow-x:auto"></div>
只设置垂直滚动条:
<div style="height:100px;overflow-y:auto"></div>
水平和垂直都设置:
<div style="width:300px;height:100px;overflow-x:auto;overflow-y:auto"></div>
猜你喜欢
- 2025-01-12 今年最常见的前端面试题,你会做几道?
- 2025-01-12 CSS3快速入门:四、盒子模型
- 2025-01-12 domutils工具库的使用方法介绍
- 2025-01-12 Grid.js - 跨框架的前端表格插件
- 2025-01-12 BootStrapBlazor升级导致的div高度100%失效的解决
- 2025-01-12 前端开发技术面试——情景版
- 2025-01-12 Python3 网络爬虫:漫画下载,动态加载、反爬虫这都不叫事
- 2025-01-12 轻松掌握 Vue render 函数:简单易懂的使用指南
- 2025-01-12 selenium中的Xpath元素定位方法
- 2025-01-12 JS原生DOM基本操作(下)
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)