怎么让超出div宽度的元素横向滚动（CSS 设置的高度超出屏幕高度为什么没出现滚动条）
1、新建html文件。2、创建大盒子和它的宽度。3、创建头部盒子。4、创建左边菜单盒子。5、创建右边内容盒子。6、预览效果如图。注意事项：DIV是层叠样式表中的...
最近有些忙碌，今天终于有时间和大家聊一聊“怎么让div内容超出后自动显示滚动条”的话题。如果你对这个话题还比较陌生，那么这篇文章就是为你而写的，让我们一起来探索其中的奥秘吧。
怎么让超出div宽度的元素横向滚动
1、新建html文件。
2、创建大盒子和它的宽度。
3、创建头部盒子。
4、创建左边菜单盒子。
5、创建右边内容盒子。
6、预览效果如图。
注意事项：
DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。
如何用css控制浏览器滚动条
用CSS控制滚动条样式
1,Overflow内容溢出时的设置
overflow 水平及垂直方向内容溢出时的设置
overflow-x 水平方向内容溢出时的设置
overflow-y 垂直方向内容溢出时的设置
以上三个属性设置的值为visible、scroll、hidden、auto
visible 默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示。
hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。
scroll 无论内容是否超越范围，都将显示滚动条。 auto 当内容超出范围时，显示滚动条，否则不显示。
应用:
没有水平滚动条:
<div style="overflow-x:hidden">test</div>
没有垂直滚动条 ：
<div style="overflow-y:hidden">test</div>
没有滚动条 ：
<div style="overflow-x:hidden;overflow-y:hidden" 或
style="overflow:hidden">test</div>
自动显示滚动条：
<div style="height:100px;width:100px;overflow:auto;">test</div>
2,自己定义滚动条的颜色
我们一般默认的滚动条样式如下左图,右图是放大了1600倍的样子,我们可以看到滚动条有几种言责组合的,我给他们标了7个号,分别注释在下面的css代码的后面了,注意css的注释代码是放在两个斜杠内的两个星号之间,如:/*这里放注释的代码*/
Body {
scrollbar-arrow-color: #f4ae21; /*图6,三角箭头的颜色*/
scrollbar-face-color: #333; /*图5,立体滚动条的颜色*/
scrollbar-3dlight-color: #666; /*图1,立体滚动条亮边的颜色*/
scrollbar-highlight-color: #666; /*图2,滚动条空白部分的颜色*/
scrollbar-shadow-color: #999; /*图3,立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #666; /*图4,立体滚动条强阴影的颜色*/
scrollbar-track-color: #666; /*图7,立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/
Cursor:url(mouse.cur); /*自定义个性鼠标*/}
以上2项适用与<body>、<div>、<textarea>、<iframe>
DIV高是100%，超出500出滚动条如何实现？
源代码如下：
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>
<title>无标题文档</title>
<style>
.abc{?height:auto;?max-height:250px;?overflow:auto;?border:1px?#000066?solid;?width:500px;?margin:0?auto;}
</style>
</head>
<body>
<div?class="abc">
<p>只有一行文字的效果</p></div>
<p> </p> <div?class="abc"> <p>多行文字高度超过250的效果</p> <p>多行文字高度超过250的效果</p> <p>多行文字高度超过250的效果</p> <p>多行文字高度超过250的效果</p> <p>多行文字高度超过250的效果</p> <p>多行文字高度超过250的效果</p> <p>多行文字高度超过250的效果</p><p>多行文字高度超过250的效果</p>
</div>
</body>
</html>
效果如下：
CSS 设置的高度超出屏幕高度为什么没出现滚动条
原因是CSS没有设置height高度、overflow属性。
1、首先写上<body>标签用来包含html的主体，再一个div来包含设置overflow的属性值为visible，那么其最后在网页中就会正常的显示了，其子元素超出父元素的部分会显示出来。
2、写一个div元素作为父元素，并且设置其overflow属性值为auto，在里面写一个div作为子元素，那么在网页中显示时，其子元素部分其在超出父元素宽度时，那么就会添加水平方向的滚动条。
而垂直方向不添加滚动条，所以这个auto属性是在子元素超出父元素宽度或者高度时，有需要的添加滚动条，而非什么情况都添加滚动条的。
3、设置好之后，如图所示，鼠标右击，在弹出的下拉列表菜单中，选择“在浏览器中打开”。
4、最后，打开之后可以看到已经有滚动条，这样操作即可解决问题了。
如何用flexbox实现超出div出现水平滚动条
<div class="a">外层div<div class="">内层内容</div></div>
.a{width:500px;overflow-x:scroll;}
好了，今天关于“怎么让div内容超出后自动显示滚动条”的话题就讲到这里了。希望大家能够通过我的讲解对“怎么让div内容超出后自动显示滚动条”有更全面、深入的了解，并且能够在今后的学习中更好地运用所学知识。
相关推荐
-
晒娃小短萌句怎么写？（晒晒小情人儿子说说 晒娃小短萌句）
导读 : 可以这样写：1、我的小宝贝，愿你在成长的道路上，遇见彩色的梦和超多小美好。2、被你可爱模样收买，剩下的全是好心情。3、看着你一天天长大，觉得是一件很神奇很幸福的...
-
第一次做伴娘，在迎亲的时候怎么整新郎比较有气氛（如何整伴郎团？）
导读 : 一.宾馆大厅前1、新郎在大厅门口大喊3声：“我亲爱的新娘子，求求你开开门，放我这个可怜虫进去吧!”声音要大到闺房里的新娘子能听到才算数。2、伴娘团要死命挡住，无...
-
结婚开门红包一般包多少 给哪些人（广东结婚开门利是一般多少 这样包最合适）
导读 : 聊到结婚开门接亲红包，其实是没有一个固定答案的，因为每个地方习俗都是不一样的，当然条件也不一样。所以没有一个标准，一般都是根据当地大致数额来包开门红包，下面第...
-
关于男朋友“独一无二的”搞笑备注（给男朋友最沙雕的备注 又贱又逗比的备注）
导读 : 以下是一些关于男朋友的搞笑备注：1. 世界第五大奇迹（指男朋友是世界上第五个让你感到惊奇的人）。2. 男友中的战斗机（指男朋友非常强大，可以战胜任何挑战）。3....
-
暖男聊天必备话语暖男撩妹套路语句大全（什么样的男生让你觉得陋（low）到爆？）
导读 : 如果问感情中哪一种人最恨？我想“渣男”必将荣登榜首。 这种存在于世界上广大男同胞中的神奇物种，是大部分女孩生命中或多或少都会出现的一类人。 他们大多拥有着令女生...
-
相亲认识的女孩子怎么微信聊天（相亲加微信了第一句话怎么开口）
导读 : 和相亲女孩微信聊天三部曲 第一、幽默开场白引起对方的聊天兴致 相亲见面之前，两个人还属于完全的陌生人，在这种情况下聊天，如果你的开场白很生硬，会让对方没有跟你...
-
婚书两姓联姻一堂缔约民国最美证婚词（山河远阔，人间烟火，无一是你，无一不是你）
导读 : 翻译如下：不同姓氏的两家联姻，在一起缔结婚约，结成良缘，是得称的匹配。桃花盛开之际，正宜婚嫁(引自诗经)，预料将来一定子孙像瓜蔓绵延，子子孙孙世代昌盛(引自诗经...
-
想成为歌手的薛之谦却靠段子翻红，娱乐圈中还有哪些靠"段子人设”吸粉的明星？（别把低素质当幽默，岳云鹏是不是该反省一下自己了？）
导读 : 我不知道提起李诞会有多少个人知道，但是这个也是靠段子起家的主持人。在之前有过一个节目叫《吐槽大会》，节目里面很多明星都会上台讲一段段子，虽然节目有待改善，段子需...
