给div添加滚动条 - 夏目友人帐

给div添加滚动条

"夏目贵志" 发表于: 2018年05月24日

最简单的方法:

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

最简单的方法:

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

文章作者:不自然地坚持

原文链接:https://www.cnblogs.com/mkdlf/p/5906166.html

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

添加新评论