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

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

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

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

* IE6不支持CSS min-height屬性。最小高度的定義：1. 元素擁有默認高度；2. 當內(nèi)容超出元素的默認高度時，元素的高度隨內(nèi)容增加而增加Figure 1:如下圖的需求

* 如上圖，兩個區(qū)域的高度不一樣。這就是 min-height 的效果演示。元素擁有一個默認的高度，當內(nèi)容超出該默認高度時，元素的高度同時隨內(nèi)容而增加。

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

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

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

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

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

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

　

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

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

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

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

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

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

廣告

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