css滚动条：鼠标移入移出显示鼠标移除隐藏，不影响html布局

• 问题：鼠标移入移出显示鼠标移除隐藏，影响html布局？

<div class='div1'>
     <div class='div2'>
        <div>
			<div>我是谁我在干什么</div>
			<div>我是谁我在干什么</div>
			<div>我是谁我在干什么</div>
			<div>我是谁我在干什么</div>
			<div>我是谁我在干什么</div>
			<div>我是谁我在干什么</div>
			<div>我是谁我在干什么</div>
			<div>我是谁我在干什么</div>
			<div>我是谁我在干什么</div>
			<div>我是谁我在干什么</div>
			<div>我是谁我在干什么</div>
			<div>我是谁我在干什么</div>
			<div>我是谁我在干什么</div>
			<div>我是谁我在干什么</div>
			<div>我是谁我在干什么</div>
			<div>我是谁我在干什么</div>
			<div>我是谁我在干什么</div>
			<div>我是谁我在干什么</div>
		</div>
    </div>   
</div>

1、首先先设置鼠标移入移出显示滚动条

.div2{
    width:100px;
    height:200px;
    overflow-y:hidden;
    overflow-x:hidden;
	border:1px solid red;
	padding-right:20px //防止滚动条遮盖内容
}
.div2:hover{
    overflow-y:auto;
}

 

运行如下：可以看到布局变了

2、设置滚动区域外的【.div1】和滚动区域下的第一个div宽度相等占满滚动区域宽度

.div1,.div2 div{
    width:100px;
}

 

运行如下：成功解决啦

到这里就可以解决css鼠标移入移出显示隐藏滚动条不影响布局的问题啦~