html添加滚动条(div添加滚动条)

html添加滚动条,原文标题:div标签添加滚动条。在网页的实际开发中,有时候需要给div标签元素添加一

html添加滚动条,原文标题:div标签添加滚动条。

在网页的实际开发中,有时候需要给div标签元素添加一个滚动条(比如水平的或者垂直的滚动条),我们该怎么写css代码呢?

给div设置滚动条需要分成两步走:

一、设置步骤

1、设置div的高度以及宽度

如果不设置高度和宽度的话,内容多也不会出现滚动条,因为没有边界能让浏览器判断内容长度是否需要出现滚动条。

2、设置div的overflow属性,你可以设置成auto(水平和垂直都有),也可以单独设置overflow-x(水平滚动条),也可以单独设置overflow-y(垂直滚动条)。

二、实例说明

<div style="height:100px;width:300px;overflow:auto;background:#FFFFFF;">这里是迷糊笔记这里是迷糊笔记这里是迷糊笔记这里是迷糊笔记这里是迷糊笔记这里是迷糊笔记这里是迷糊笔记</div>

运行如下:

html添加滚动条(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>

本文《html添加滚动条(div添加滚动条)》由网赚联盟( wangzhuan.org.cn )整理或原创,感谢您的阅读。

随机文章

SEO教程
友情链接交换
关键词排名优化
网站内容优化
GEO培训
SEO小小课堂网
站长导航
关键词排名优化

百度搜索“网赚联盟”即可找到本站,微信搜索“小小课堂网”关注小小课堂网公众号。网赚联盟( wangzhuan.org.cn )欢迎用户投稿,发布者:迷糊笔记,文章版权归作者所有,投稿文章不代表网赚联盟立场,中二少年发布为网赚联盟原创文章,转载请注明出处:https://wangzhuan.org.cn/324374.html

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注