Div处理滚动条问题

 1，用div做容器现在已经十分普遍，下面是最基本的代码

 <div style="50px;height:50px;background-color:blue">
        <p>等哈哈上的凤凰山阿訇多浪费哈桑登录号法定上阿里山的弗拉和杜甫大赛凤凰撒旦凤凰山的康复后死定了凤凰拉丁苏杭</p>
    </div>

 

 内容就会溢出，且不美观。后来看资料，才发现有overflow 属性

2.定义和用法

overflow 属性规定当内容溢出元素框时发生的事情。

2.1

   overflow-y:scroll; 总是显示纵向滚动条      overflow-x:scroll; 总是显示横向滚动条

无论在字体是否超出容器div，都会显示滚动条

 <div style="100px;height:100px;background-color:blue;overflow:scroll; ">
        <p>苏杭</p>
    </div>

 2.2

overflow-y:visible 不剪切内容也不添加纵向滚动  overflow-x:visible : 不剪切内容也不添加横向滚动条 。是默认值，内容会呈现在边框之外。也就是第一次遇见的问题。

2.3

overflow-x:hidden; 不显示横向滚动条 overflow-y:hidden; 不显示纵向滚动条   内容会被修剪，并且其余内容是不可见的。

2.4

overflow:auto根据内容判断是否显示滚动条，如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。这样更好的解决滚动条显现的问题

3.之后测试又提出要不显示滚动条，但是内容是可以拉动的。经过一番试验，解决方案如下：

   在外部套一个div，并设置overflow为hidden，则超出的部分就会被剪切不显示。并且设置内部div的宽/高，大于外部div的宽/高，则超出的部分就会被第一个div设置的hidden属性遮盖剪切不显示出来。并且给内部div设置scroller或auto，就会呈现鼠标可以滚动的效果

 <div style="100px;height:100px;overflow:hidden">
        <div style="115%;height:120%;background-color:blue;overflow:scroll ">
            苏杭大发发送的发生的房顶上发送安定算法等发达双丰收苏杭大发发送的发生的房顶上发送安定算法等发达双丰收
        </div>
    </div>

 

 

结语：请各位大神多多指教！！！