css超出隐藏滚动条，内容可滚动原理分析

原理分析：

    原理：
     1.父元素设置overflow: hidden;
     目的：1）子容器滚动条裁剪掉，保留纵向滚动功能。
                 2）子容器里面具体内容高度超出部分裁剪掉，美观?。
     2.子元素设置宽度大于父元素宽度，超出的滚动条会被裁剪掉；
         设置overflow-y: auto,让接下来的具体内容超出高度隐藏滚动条，但是可以滚动。
     3.具体的内容设置高度大于父元素高度，实现没有滚动条出现内容可滚动效果

html:

<div class="div-box">
    <div class="div">
        <p class="con">我是内容</p>
    </div>
</div>

css:

* { margin: 0; padding: 0; }
.div-box { width: 500px; height: 250px; overflow: hidden; }
.div { width: 530px; height: 250px; overflow-y: auto; }
.con { height: 898px; text-align: center; background-color: #f5f5f5; }

PS : 点击标题 查看原作者