阿里云-云小站(无限量代金券发放中)
【腾讯云】云服务器、云数据库、COS、CDN、短信等热卖云产品特惠抢购

div如何添加滚动条?

76次阅读
没有评论

共计 803 个字符,预计需要花费 3 分钟才能阅读完成。

导读 div 添加滚动条只需要指定 overflow 属性为 auto 即可。

div 如何添加滚动条?

以下实例设置了 div 水平滚动条:

实例

<div style="height:300px;width:70px;overflow:auto;background:#EEEEEE;"> 菜鸟教程 -- 学的不仅是技术,更是梦想!!!菜鸟教程 -- 学的不仅是技术,更是梦想!!!菜鸟教程 -- 学的不仅是技术,更是梦想!!!菜鸟教程 -- 学的不仅是技术,更是梦想!!!</div>

宽度 (width) 和高度 (height) 可以根据实际需要来设定。

以上实例表示如果 div 内容的高度大于 300px 就会出现垂直滚动条,小于 300px 就没有滚动条。如果宽度大于 70px 会出现水平滚动条,小于就没有。

如果你想在 div 中滚动条是一直存在的则可以设置 overflow 属性为 scroll:

你也可以将 overflow 设置为 scroll,即:

实例

<div style="height:300px;width:200px;overflow:scroll;background:#EEEEEE;"> 菜鸟教程 -- 学的不仅是技术,更是梦想!!!菜鸟教程 -- 学的不仅是技术,更是梦想!!!菜鸟教程 -- 学的不仅是技术,更是梦想!!!菜鸟教程 -- 学的不仅是技术,更是梦想!!!</div>

更多设置

只设置水平滚动条:

<div style="width:100px;overflow-x:auto"></div>

只设置垂直滚动条:

<div style="height:300px;overflow-y:auto"></div>

水平与垂直都设置:

<div style="width:70px;height:300px;overflow-x:auto;overflow-y:auto"></div>

阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年,有高配

腾讯云新客低至 82 元 / 年,老客户 99 元 / 年

代金券:在阿里云专用满减优惠券

正文完
星哥玩云-微信公众号
post-qrcode
 0
星锅
版权声明:本站原创文章,由 星锅 于2024-07-25发表,共计803字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
【腾讯云】推广者专属福利,新客户无门槛领取总价值高达2860元代金券,每种代金券限量500张,先到先得。
阿里云-最新活动爆款每日限量供应
评论(没有评论)
验证码
【腾讯云】云服务器、云数据库、COS、CDN、短信等云产品特惠热卖中