Div處理滾動條問題

 1，用div做容器現在已經十分普遍，下面是最基本的代碼

 <div style="width:50px;height:50px;background-color:blue">
        <p>等哈哈上的鳳凰山阿訇多浪費哈桑登錄號法定上阿里山的弗拉和杜甫大賽鳳凰撒旦鳳凰山的康復后死定了鳳凰拉丁蘇杭</p>
    </div>

 

 內容就會溢出，且不美觀。后來看資料，才發現有overflow 屬性

2.定義和用法

overflow 屬性規定當內容溢出元素框時發生的事情。

2.1

   overflow-y:scroll; 總是顯示縱向滾動條      overflow-x:scroll; 總是顯示橫向滾動條

無論在字體是否超出容器div，都會顯示滾動條

 <div style="width: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="width:100px;height:100px;overflow:hidden">
        <div style="width:115%;height:120%;background-color:blue;overflow:scroll ">
            蘇杭大發發送的發生的房頂上發送安定算法等發達雙豐收蘇杭大發發送的發生的房頂上發送安定算法等發達雙豐收
        </div>
    </div>

 

 

結語：請各位大神多多指教！！！