教你玩轉CSS Overflow

CSS 佈局 - Overflow

CSS overflow 屬性用於控制內容溢出元素框時顯示的方式。

    <style>
        #overflowTest {
            background: #4CAF50;
            color: white;
            padding: 15px;
            width: 80%;
            height: 100px;
            overflow: scroll;
            border: 1px solid #ccc;
        }
    </style>
    <div id="overflowTest">
    <p>這裏的文本內容是能夠滾動的，滾動條方向是垂直方向。</p>
    <p>這裏的文本內容是能夠滾動的，滾動條方向是垂直方向。</p>
    <p>這裏的文本內容是能夠滾動的，滾動條方向是垂直方向。</p>
    <p>這裏的文本內容是能夠滾動的，滾動條方向是垂直方向。</p>
    <p>這裏的文本內容是能夠滾動的，滾動條方向是垂直方向。</p>
    <p>這裏的文本內容是能夠滾動的，滾動條方向是垂直方向。</p>
    </div>

 

CSS Overflow

CSS overflow 屬性能夠控制內容溢出元素框時在對應的元素區間內添加滾動條。

overflow屬性有如下值：

值	描述
visible	默認值，內容不會被修剪，會呈如今元素框以外
hidden	內容會被修剪，而且其他內容是不可見的
scroll	內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容
auto	若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容
inherit	規則應該從父元素繼承overflow屬性的值

 

注意:overflow 屬性只工做於指定高度的塊元素上。

注意: 在 OS X Lion ( Mac 系統) 系統上，滾動條默認是隱藏的，使用的時候纔會顯示 (設置 「overflow:scroll」 也是同樣的)。

overflow: visible

默認狀況下，overflow 的值爲 visible， 意思是內容溢出元素框：

代碼演示：

    <style>
        div.visible {
            padding: 4px;
            background-color: #eee;
            width: 200px;
            height: 100px;
            overflow: visible;
            xborder: 1px dotted red;
        }
    </style>
    <div class="visible">
        <p>這裏的文本內容會溢出元素框。</p>
        <p>這裏的文本內容會溢出元素框。</p>
        <p>這裏的文本內容會溢出元素框。</p>
        <p>這裏的文本內容會溢出元素框。</p>
        <p>這裏的文本內容會溢出元素框。</p>
    </div>

 

效果演示：