css超出显示滚动条的方法有哪些


本文摘自PHP中文网,作者coldplay.xixi,侵删。

css超出显示滚动条的方法:1、计算滚动条宽度并隐藏起来;2、使用三个容器包围起来,不需要计算滚动条的宽度;3、自定义滚动条的伪对象选择器【::webkit-scrollbar】。

本教程操作环境:windows7系统、css3版,DELL G3电脑。

css超出显示滚动条的方法:

方法1:计算滚动条宽度并隐藏起来

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<div class="outer-container">

    <div class="inner-container">

        ......

    </div>

</div>

.outer-container{

    width: 360px;

    height: 200px;

    position: relative;

    overflow: hidden;

}

.inner-container{

    position: absolute;

    left: 0;

    top: 0;

    right: -17px;

    bottom: 0;

    overflow-x: hidden;

    overflow-y: scroll;

}

注释:这个代码巧妙的向右移动了17个像素,刚好等于滚动条的宽度。这个值是我手动调试得来的。在chrome和IE没发现问题。

方法2:使用三个容器包围起来,不需要计算滚动条的宽度

阅读剩余部分

相关阅读 >>

css里面有哪些选择器

css圆角属性是什么

css代码规范分享

css中font字体颜色怎么设置

ie9不能读取外部css样式怎么办

利用纯css实现动态的文字效果实例

深入了解css中的计数函数

css如何将图片设置为圆形图片

jquery如何动态添加删除css样式?(代码示例)

css怎么让高度自适应

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...