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