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

成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括甘南網(wǎng)站建設(shè)、甘南網(wǎng)站制作、甘南網(wǎng)頁(yè)制作以及甘南網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，甘南網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到甘南省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

瀏覽器參照基準(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">喝水為什么會(huì)中毒？</div>   
<div class="test">喝水為什么會(huì)中毒？<br>日前有媒體報(bào)道稱日飲用3升水年輕10歲，于是有人真開(kāi)始喝了，可喝了4天后，尿血了。水是生命之源，但是不是喝水越多越好呢？喝水多了又會(huì)發(fā)生什么呢？</div>

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

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

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

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

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

　

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

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

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

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

網(wǎng)站名稱：Web前端中height、min-height有什么區(qū)別
地址分享：http://www.chinadenli.net/article16/gejhdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、用戶體驗(yàn)、域名注冊(cè)、網(wǎng)站導(dǎo)航、微信公眾號(hào)、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)