Web前端中height、min-height有什么區(qū)別

這篇文章將為大家詳細(xì)講解有關(guān)Web前端中height、min-height有什么區(qū)別，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

瀏覽器參照基準(zhǔn)：Firefox, Chrome, Safari, Opera, IE；　　

* IE6不支持CSS min-height屬性。最小高度的定義：1. 元素?fù)碛心J(rèn)高度；2. 當(dāng)內(nèi)容超出元素的默認(rèn)高度時(shí)，元素的高度隨內(nèi)容增加而增加Figure 1:如下圖的需求

* 如上圖，兩個(gè)區(qū)域的高度不一樣。這就是 min-height 的效果演示。元素?fù)碛幸粋€(gè)默認(rèn)的高度，當(dāng)內(nèi)容超出該默認(rèn)高度時(shí)，元素的高度同時(shí)隨內(nèi)容而增加。

eg1:  
<style>   
.test{   
    float:left;   
    width:200px;   
    margin:0 5px;   
    padding:10px;   
    border-radius:10px;   
    background:#eee;   
}   
.test{   
    min-height:80px;  /* 實(shí)現(xiàn)最小高度代碼 */  
}   
</style>   
  
<div class="test">喝水為什么會中毒？</div>   
<div class="test">喝水為什么會中毒？<br>日前有媒體報(bào)道稱日飲用3升水年輕10歲，于是有人真開始喝了，可喝了4天后，尿血了。水是生命之源，但是不是喝水越多越好呢？喝水多了又會發(fā)生什么呢？</div>

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

.test{   
    height:80px;  /* 看看ie6會如何 */  
}

* 將 min-height:80px; 改成 height:80px; 在IE6下查看這個(gè)樣式。你可能發(fā)現(xiàn)了奇跡，是的，你沒看錯(cuò)。這個(gè)DEMO的表現(xiàn)與eg1的demo在高級瀏覽器下的表現(xiàn)一致，即最小高度的效果。

* 但這還不是大獲全勝的時(shí)候，因?yàn)槟銜l(fā)現(xiàn)本例在高級瀏覽器下都GameOver了。腫么辦，這不是坑爹么？別著急，作為一個(gè)合格的coder，你肯定會想各種辦法來搞定它。

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

Figure 4:大獲全勝的場景.test{   
    min-height:80px;  /* for ie7+, firefox, chrome, safari, opera */  
    _height:80px;        /* for ie6 */  
}

* ok, 我們實(shí)現(xiàn)了包含ie6在內(nèi)的min-height效果。

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

關(guān)于“Web前端中height、min-height有什么區(qū)別”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。