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;   

 #:0 5px;   

5.     padding:10px;   

6. #    border-radius:10px; #    

   background
:#eee； ##    min-height:80px;  /* 實現最小高度代碼 */   
}   
9. style
   >
  
#  
12. <

15. ## p class="test"

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

17. p

>

  

  

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

1. CSS Code
2. 複製內容到剪貼簿

   .test{   

    
3. height

   :

   #80px
;  
4. /* 看看ie6會如何 */

     

###############1C ####}   ############  #####################將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.    #/* for ie6 */  

   #}   

4. ##  

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

 記住，千萬別加上

overflow

除visible之外的值，否則你的ie6又要悲劇demo。

以上就是本文的全部內容，希望對大家的學習有所幫助。

以上是CSS中height和min-height的差別詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！