css 百分比 定義高度 小結

在符合標準的 XHTML 模式下，將 DIV 的高度簡單的設定為 100% 往往並不能達到想要的效果，

原因是“百分比”是個相對於父節點的值，

如果你沒有設定他們的父節點的高度，那麼設定 DIV 的高度為100%就沒有了意義。

 

另外一個問題是你或許期望的並不是100%，而是在頁面高度不夠一屏時按照100%顯示，

當你的頁面超過視窗的大小時，DIV 要能夠撐開，這樣的話min-height才是你真正想要的。

 

下面的代碼可以讓頁面不足一屏時按照100%顯示，當超過一屏時，又能夠撐開：

 

CSS:

 

html, body { 

    height: 100%; 

} 

#container {

    /* this is the div you want to fill the window */ 

    min-height: 100%; 

}

 

由於 Internet Explorer (IE) 6 及其以下的版本並不支援 min-height 屬性，

因此，我們需要添加針對 IE 的代碼。

 

CSS:

 

* html #container { 

    height:100% 

}

在 IE 下，當 DIV 的內容超過 DIV 本身的高度時， 

DIV 會自動撐開，因此這樣的代碼可以很好的解決上面的問題。