CSS中height和min-height的區別詳解

這篇文章主要為大家詳細介紹了CSS中height和min-height的區別，從簡單一實例出發為大家進行分析，感興趣的小夥伴們可以參考一下

做為Web前端新人，需要瞭解height、min-height的區別

瀏覽器參照基準：Firefox, Chrome, Safari, Opera, IE；

* IE6不支援CSS min-height屬性。最小高度的定義：1. 元素擁有預設高度；2. 當內容超出元素的預設高度時，元素的高度隨內容增加而增加

Figure 1:如的需求

* 如，兩個地區的高度不一樣。這就是 min-height 的效果示範。元素擁有一個預設的高度，當內容超出該預設高度時，元素的高度同時隨內容而增加。

eg1:

XML/HTML Code複製內容到剪貼簿

1. <style>

2. .test{

3. float:left;

4. width:200px;

5. margin:0 5px;

6. padding:10px;

7. border-radius:10px;

8. background:#eee;

9. }

10. .test{

11. min-height:80px; /* 實現最小高度代碼 */

12. }

13. </style>

15. <p class="test">喝水為什麼會中毒？</p>

16. <p class="test">喝水為什麼會中毒？<br>日前有媒體報道稱日飲用3升水年輕10歲，於是有人真開始喝了，可喝了4天后，尿血了。水是生命之源，但是不是喝水越多越好呢？喝水多了又會發生什麼呢？</p>

* 如上代碼，我們只需要一行代碼 min-height:80px; 就可以實現非IE6瀏覽器的最小高度。

CSS Code複製內容到剪貼簿

1. .test{

2. height:80px; /* 看看ie6會如何 */

3. }

將 min-height:80px; 改成 height:80px; 在IE6下查看這個樣式。你可能發現了奇蹟，是的，你沒看錯。這個DEMO的表現與eg1的demo在進階瀏覽器下的表現一致，即最小高度的效果。

但這還不是大獲全勝的時候，因為你會發現本例在進階瀏覽器下都GameOver了。腫麼辦，這不是坑爹嗎？別著急，作為一個合格的coder，你肯定會想各種辦法來搞定它。

你是一個前端工程師，所以你必須要知道一些瀏覽器專屬的CSS Hack，雖然大多數情況下不推薦使用。我們想辦法讓進階瀏覽器仍然使用min-height，而ie6使用height，這樣似乎就可以達成目的了，動手吧。

　

Figure 4:大獲全勝的情境

CSS Code複製內容到剪貼簿

1. .test{

2. min-height:80px; /* for ie7+, firefox, chrome, safari, opera */

3. _height:80px; /* for ie6 */

4. }

ok, 我們實現了包含ie6在內的min-height效果。

記住，千萬別加overflow除visible之外的值，否則你的ie6又要悲劇demo。