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

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

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

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

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

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

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

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

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

目前只有chrome支持设置滚动条样式，给div设置伪类

::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的

::-webkit-scrollbar-button 滚动条两端的按钮

::-webkit-scrollbar-track  外层轨道

::-webkit-scrollbar-track-piece  内层滚动槽

::-webkit-scrollbar-thumb 滚动的滑块

::-webkit-scrollbar-corner 边角

::-webkit-resizer 定义右下角拖动块的样式

如div::-webkit-scrollbar{

width:4px

}

1、<div style="height:300pxwidth:100pxoverflow:auto"><div/>（height和width根据需求设定）

注意:如果只写height就只有垂直滚动条，只写width就只有水平滚动条,都不写没有效果。还有这里overflow设置为auto,也就说是如果你的页面高度大于300px就会出现滚动条，小于300px就没有滚动条。同理，如果宽度大于100px出现滚动条，小于就没有。

2、你也可以将overflow设置为scroll，即:<div style="height:300pxwidth:100pxoverflow:scroll"><div/>。这样设定的效果为

不管你的页面高度大于还是小于300px,都会出现滚动条，宽度同理。

3、也可以这样设置

水平滚动条：<div style="width:100pxoverflow-x:auto"></div>

垂直滚动条：<div style="height:300pxoverflow-y:auto"></div>

水平加垂直：<div style="width:100pxheight:300pxoverflow-x:autooverflow-y:auto"></div>

扩展资料

<div>可定义文档中的分区或节（division/section）。

<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

注释：<div>是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。

提示：请使用 <div>元素来组合块级元素，这样就可以使用样式对它们进行格式化。

参考资料：百度百科 div

---