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