CSS應用實例(4)-溢出與最小高度

從前面的幾個範例我們可以知道,HTML的DIV標籤代表的是一個「區塊」,在每個區塊中我們可以放置自己想要放的內容,並且透過CSS做配置與設計。這一篇要介紹DIV+CSS的溢出特性(除了DIV之外,也有其它標籤具有相同的特性,不過一般來說只會針對DIV標籤做設定,只要學會如何使用DIV標籤,其它的都是一樣的道理。),以及我個人認為很實用的最小高度設定。

首先,我建立一個DIV標籤,裡面已經輸入一些內容,像這樣:

☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆

這個時候,因為沒有設定box的寬和高,所以預設的寬度就是100%,而高度就是內容的高度。

☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆

當我設定它的 width:200px 時,它會自動把內容縮短,但若又設定 height:50px,就會產生溢出的問題:

☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆

我們回頭來看overflow的標籤,就可以知道這是因為預設值visible所造成的。所以這個時候我們可以選擇把超出部份隱藏的hidden、無論內容是否超出,都顯示捲軸的scroll,以及只有在內容超出時顯示捲軸的auto。

但是還有一種很討厭但又很常見的情形,就是我希望當網站沒有內容的時候,這個DIV維持在某個高度;可是當內容變多時,DIV的框框也要隨著變高。不是隱藏,也不是產生捲軸。為什麼要這麼做呢?因為這樣,在下面的物件才不會跑上來,變成像這樣:

☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆

要解決這個問題,就要用到最小高度了。在box的CSS中加入下面的程式碼:

min-height:50px;       /*最小高度*/
    height:auto !important;     /*替IE6以前版本設定最小高度*/
    height:50px;

原本只要加第一行 min-height:50px 就可以了,不過IE6以前的版本沒有支援,所以透過下面二行來設定。因為第二行 !important 的關係,所以IE7以上的瀏覽器會忽略第三行。這是網路上流傳的做法,由於我本身也沒有用IE6測式過,如果有誤請指正,謝謝。

用這種方式就可以得到下面的結果:

☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆摩刻部落☆
☆摩刻部落☆

另外,最大高度、以及最大/小寬度都是一樣的道理,只要把對應的height與width互換即可。