CSS中height和min height的區別

2022-09-27 09:54:13 字數 933 閱讀 5433

做為web前端新人,需要了解height、min-height的區別

瀏覽器參照基準:firefox, chrome, safari, opera, ie;

* ie6不支援css min-height屬性。最小高度的定義:1. 元素擁有預設高度;2. 當內容超出元素的預設高度時,元素的高度隨內容增加而增加

figure 1:如下圖的需求

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

eg1:

xml/html code複製內容到剪貼簿

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

css code複製內容到剪貼簿

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

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

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

figure 4:大獲全勝的場景

www.cppcns.com

css code複製內容到剪貼簿

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

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

本文標題: css中height和min-height的區別

本文位址:

CSS中詳解height屬性

目錄結構 contents structure hight屬性值型別一覽表 height的 的使用 定義例項 需要注意的 參考文章 value describtion auto 預設length 絕對長度 相對長度 inherit 繼承這裡筆者主要介紹相對長度的用法,關於絕對長度讀者可以參考css尺...

CSS中詳解height屬性

目錄結構 contents structure hight屬性值型別一覽表 height的 的使用 定義例項 需要注意的 參考文章 value describtion auto 預設length 絕對長度 相對長度 inherit 繼承這裡筆者主要介紹相對長度的用法,關於絕對長度讀者可以參考css尺...

屬性 css 尺寸 height

1.obj height value height 中可以值 可以是數字形式也可以是字串形式。如果是數字形式那麼預設單位會是px obj height function index,value 其中index是當前物件的索引value是當前物件的高度 height的計算區域是 不包含padding,...