怎么样在div+css中设置一个div的框并出现滚动条
<div style="width:260px;height:120px; overflow:scroll; border:1px solid;"> 这里是你要显示的内容 </div>
其他回答
overflow：auto;//内容超出出现滚动条
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
.div{
width:100%;
height:200px;
overflow-x:hidden;
overflow-y:auto;
}
/*兼容IE*/
.div{
scrollbar-face-color: #20a774;/*移动滑块颜色*/
scrollbar-shadow-color: #20a774;/*移动滑块边框颜色*/
scrollbar-track-color: #ccc;/*背景颜色*/
scrollbar-arrow-color: #ddd;/*箭头颜色*/
}
.div::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #ccc;
}/* 滚动条的滑轨背景颜色 */
.div::-webkit-scrollbar
{
width: 6px;
background-color: #ccc;
}
.div::-webkit-scrollbar-thumb
{
background-color: #20a774;
}/* 滑块颜色 */
|
当div内的内容超过200px时才会显示滚动条，下边的代码是对滚动条的优化，希望对你有帮助。
<div style="position:absolute; height:400px; overflow:auto"></div>
div 设置滚动条显示：overflow :yes
div 设置滚动条自适应显示：overflow :auto
div 设置上下滚动条显示：overflow-y :yes
div 设置上下滚动条自适应显示：overflow-y :auto
如果该div被包含在其他对象例如td中，则位置可设为相对：position:relative
overflow-y:scroll; 总是显示纵向滚动条
overflow-y:visible; 不剪切内容也不添加纵向滚动条
overflow-x:scroll; 总是显示横向滚动条
overflow-x:visible : 不剪切内容也不添加横向滚动条
例如：
|
1
|
<div style="width:500px; height:500px; overflow-y:scroll;"></div>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<style type="text/css">
.div1 {
width: 500px;
height: 200px;
background: #eee;
overflow: auto;
}
</style>
<div class="div1">
百度知道是一个基于搜索的互动式知识问答分享平台，于2005年6月21日发布，并于2005年11月8日转为正式版。百度知道一直探索国际化发展，于2012年3月31日发布百度知道台湾版。“百度知道”，是用户自己根据具有针对性地提出问题，通过积分奖励机制发动其他用户，来解决该问题的搜索模式。 同时，这些问题的答案又会进一步作为搜索结果，提供给其他有类似疑问的用户，达到分享知识的效果。
百度知道的最大特点，就在于和搜索引擎的完美结合，让用户所拥有的隐性知识转化成显性知识，用户既是百度知道内容的使用者，同时又是百度知道的创造者，在这里累积的知识数据可以反映到搜索结果中。通过用户和搜索引擎的相互作用，实现搜索引擎的社区化。
百度知道也可以看作是对搜索引擎功能的一种补充，让用户头脑中的隐性知识变成显性知识，通过对回答的沉淀和组织形成新的信息库，其中信息可被用户进一步检索和利用。这意味着，用户既是搜索引擎的使用者，同时也是创造者。百度知道可以说是对过分依靠技术的搜索引擎的一种人性化完善。
</div>
</body>
</html>
|
overflow-y: auto;
overflow-x: hidden;
属性，这样的话超出你设置的高度，就会出现流动条
效果入下
代码如下
<html>
<head></head>
<body>
<div style="font-size:40px; color:red; font-wight:700 "></div>
<div style="width:100%" ><img src="img/1.jpg"></div>
<div style="width: 300px; height:100px; overflow-y:scroll; border: 1px solid red ">在抓捕了巫支祁以后，李子玉和高重九当天就登上了去往临高的船。李子玉从来没有见过这么大的船。虽然元老院已经进入广州多日，但是由于平时任务的繁忙，偶有时间也被好学的李子玉用来学习澳洲知识，所以一直没有机会去见识一下澳洲大船。因为李子玉和高重九是先进工作者，他们被允许在船的部分地方自由活动。李子玉和高重九一边感叹船的雄壮宏伟，一边转悠。他们走到前边甲板上的时候，迎面走来一队人，这队人全部都是短发短衣，中间为首的人的气质明显与其他人不同。这一行人就是元青团第一书记何青辰带领的前往临高参观学习的广州优秀青年代表。在抓捕了巫支祁以后，李子玉和高重九当天就登上了去往临高的船。李子玉从来没有见过这么大的船。虽然元老院已经进入广州多日，但是由于平时任务的繁忙，偶有时间也被好学的李子玉用来学习澳洲知识，所以一直没有机会去见识一下澳洲大船。因为李子玉和高重九是先进工作者，他们被允许在船的部分地方自由活动。李子玉和高重九一边感叹船的雄壮宏伟，一边转悠。他们走到前边甲板上的时候，迎面走来一队人，这队人全部都是短发短衣，中间为首的人的气质明显与其他人不同。这一行人就是元青团第一书记何青辰带领的前往临高参观学习的广州优秀青年代表。在抓捕了巫支祁以后，李子玉和高重九当天就登上了去往临高的船。李子玉从来没有见过这么大的船。虽然元老院已经进入广州多日，但是由于平时任务的繁忙，偶有时间也被好学的李子玉用来学习澳洲知识，所以一直没有机会去见识一下澳洲大船。因为李子玉和高重九是先进工作者，他们被允许在船的部分地方自由活动。李子玉和高重九一边感叹船的雄壮宏伟，一边转悠。他们走到前边甲板上的时候，迎面走来一队人，这队人全部都是短发短衣，中间为首的人的气质明显与其他人不同。这一行人就是元青团第一书记何青辰带领的前往临高参观学习的广州优秀青年代表。</div>
</body>
</html>