给div添加滚动条（转）

Myth丶恋晨 2022-06-15 11:14 297阅读 0赞

#### 基础css知识： ####

overflow-y:scroll; 总是显示纵向滚动条
    overflow-y:visible : 不剪切内容也不添加纵向滚动条
    了解：overflow-y手册http://www.divcss5.com/shouce/c_overflowy.shtml
    
    
    overflow-x:scroll; 总是显示横向滚动条
    overflow-x:visible : 不剪切内容也不添加横向滚动条
    了解：overflow-x手册http://www.divcss5.com/shouce/c_overflowx.shtml

#### 最简单的方法： ####

<div style="height:300px;width:100px;overflow:auto"><div/>（height和
    width根据需求设定）

#### 注意： ####

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

#### 也可以这样设置： ####

你也可以将overflow设置为scroll，即:<div style="height:300px;width:100px;overflow:scroll"><div/>。这样设定的效果为
    
    　　不管你的页面高度大于还是小于300px,都会出现滚动条，宽度同理。

#### 设置自适应： ####

水平滚动条：<div style="width:100px;overflow-x:auto"></div>
    
    　　垂直滚动条：<div style="height:300px;overflow-y:auto"></div>
    
    　　水平加垂直：<div style="width:100px;height:300px;overflow-x:auto;overflow-y:auto"></div>

本文转自：[http://www.cnblogs.com/mkdlf/p/5906166.html][http_www.cnblogs.com_mkdlf_p_5906166.html]  
： [http://www.divcss5.com/rumen/r624.shtml][http_www.divcss5.com_rumen_r624.shtml]

[http_www.cnblogs.com_mkdlf_p_5906166.html]: http://www.cnblogs.com/mkdlf/p/5906166.html
[http_www.divcss5.com_rumen_r624.shtml]: http://www.divcss5.com/rumen/r624.shtml