怎么样在div+css中设置一个div的框并出现滚动条

发布网友发布时间：2022-04-23 02:09

我来回答

共12个回答

热心网友时间：2022-04-28 14:25

1、打开dw，新建一个html页面，进入html页面编辑。

2、在代码的body中间编写一个div层。

3、将这个新建好的html页面跟编写好的div利用快捷键“ctrl+s”另保存到知道的目录下。

4、点击dw的文件按钮，在弹出的下拉框中，选择“新建”。

5、在新建的窗口中，找到“css”这一栏，点击“css”新建一个css样式。

6、写样式用".pingmu{}"开始写，给它固定宽高，再添加背景色，让div自适应宽高，超过部分显示滚动条。

7、将这个css样式保存到同级目录下，如ceshi.html在c盘，css样式也保存在c盘。

8、保存好样式后，双击这个ceshi.html页面，用浏览器打开后看到100像素宽高的黑块。

热心网友时间：2022-04-28 15:43

<!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>

热心网友时间：2022-04-28 17:17

效果入下

代码如下

<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>

热心网友时间：2022-04-28 19:09

.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时才会显示滚动条，下边的代码是对滚动条的优化，希望对你有帮助。

热心网友时间：2022-04-28 21:17

div 加滚动条的方法：

<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

热心网友时间：2022-04-28 23:41

<div style="width:260px;height:120px; overflow:scroll; border:1px solid;"> 这里是你要显示的内容 </div>

热心网友时间：2022-04-29 02:23

overflow-y:scroll; 总是显示纵向滚动条

overflow-y:visible; 不剪切内容也不添加纵向滚动条

overflow-x:scroll; 总是显示横向滚动条

overflow-x:visible : 不剪切内容也不添加横向滚动条

例如：

热心网友时间：2022-04-29 05:21

给你2种方法： 1、在文字或者滚动条所在层加入marging-bottom:20px; 2、在文字或者滚动条所在层的外一层加入padding-bottom:20px; padding-bottom:

热心网友时间：2022-04-29 08:35

border：1px solid gray；//给div设置边框

overflow：auto;//内容超出出现滚动条

热心网友时间：2022-04-29 12:07

首先给你的div设置宽高，然后设置
overflow-y: auto;
overflow-x: hidden;
属性，这样的话超出你设置的高度，就会出现流动条

热心网友时间：2022-04-29 15:55

div { width: 100px; height: 100px; overflow: scroll;}

热心网友时间：2022-04-29 19:59

设置这个div的scorll属性。