CSS中DIV盒子設(shè)置最小高度值并自適應(yīng)高度

一般來說衍锚,想讓一個DIV盒子的高度能夠根據(jù)盒子內(nèi)的內(nèi)容自動調(diào)整褂微,不設(shè)置盒子的高度值(height)就行了功蜓。

但還有一種情況:為了使盒子布局美觀,需要對盒子設(shè)置一個初始高度宠蚂,當(dāng)盒子中的內(nèi)容很少時式撼,保持這個初始高度,如果內(nèi)容超過該盒子初始高度的容量求厕,則盒子的高度根據(jù)內(nèi)容自動調(diào)整增高著隆。所以這時需要設(shè)置一個具體的DIV盒子高度值,又要使其能夠在超過初始高度時自適應(yīng)呀癣。

具體解決辦法是(假設(shè)DIV盒子的初始高度是500px):

#columnMain{

min-height:500px;

height:auto !important;

height:500px;

}

這里美浦,height:500px;適用于IE6,因為IE6不認(rèn)識前兩條CSS語句项栏,但height:500px;對IE6足夠了抵代,因為IE6的渲染辦法是當(dāng)已設(shè)置的實際高度不夠用時,會自動撐開盒子的高度忘嫉;前兩條CSS語句min-height:500px;height:auto !important;是對IE7+、Chrome案腺、FF和Oprea用的庆冕,這些版本的瀏覽器使用min-height:500px;設(shè)置了最小高度,如果超過了最小高度劈榨,則使用height:auto !important;自動調(diào)整高度访递,注意這條CSS語句中有!important,所以它的優(yōu)先性是超過其后的height:500px;的同辣。

至此拷姿,問題解決。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末旱函,一起剝皮案震驚了整個濱河市响巢,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌棒妨,老刑警劉巖踪古,帶你破解...
    沈念sama閱讀 221,273評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡伏穆,警方通過查閱死者的電腦和手機拘泞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評論 3 398
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來枕扫,“玉大人陪腌,你說我怎么就攤上這事⊙糖疲” “怎么了诗鸭?”我有些...
    開封第一講書人閱讀 167,709評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長燕刻。 經(jīng)常有香客問我只泼,道長,這世上最難降的妖魔是什么卵洗? 我笑而不...
    開封第一講書人閱讀 59,520評論 1 296
  • 正文 為了忘掉前任请唱,我火速辦了婚禮,結(jié)果婚禮上过蹂,老公的妹妹穿的比我還像新娘十绑。我一直安慰自己,他們只是感情好酷勺,可當(dāng)我...
    茶點故事閱讀 68,515評論 6 397
  • 文/花漫 我一把揭開白布本橙。 她就那樣靜靜地躺著,像睡著了一般脆诉。 火紅的嫁衣襯著肌膚如雪甚亭。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,158評論 1 308
  • 那天击胜,我揣著相機與錄音亏狰,去河邊找鬼。 笑死偶摔,一個胖子當(dāng)著我的面吹牛暇唾,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播辰斋,決...
    沈念sama閱讀 40,755評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼策州,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了宫仗?” 一聲冷哼從身側(cè)響起够挂,我...
    開封第一講書人閱讀 39,660評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎锰什,沒想到半個月后下硕,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體丁逝,經(jīng)...
    沈念sama閱讀 46,203評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,287評論 3 340
  • 正文 我和宋清朗相戀三年梭姓,在試婚紗的時候發(fā)現(xiàn)自己被綠了霜幼。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,427評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡誉尖,死狀恐怖罪既,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情铡恕,我是刑警寧澤琢感,帶...
    沈念sama閱讀 36,122評論 5 349
  • 正文 年R本政府宣布,位于F島的核電站探熔,受9級特大地震影響驹针,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜诀艰,卻給世界環(huán)境...
    茶點故事閱讀 41,801評論 3 333
  • 文/蒙蒙 一柬甥、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧其垄,春花似錦苛蒲、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,272評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至喇颁,卻和暖如春漏健,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背橘霎。 一陣腳步聲響...
    開封第一講書人閱讀 33,393評論 1 272
  • 我被黑心中介騙來泰國打工漾肮, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人茎毁。 一個月前我還...
    沈念sama閱讀 48,808評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像忱辅,于是被迫代替她去往敵國和親七蜘。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,440評論 2 359

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案墙懂? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,756評論 1 92
  • 選擇qi:是表達式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color橡卤,font,text-align损搬,li...
    wzhiq896閱讀 1,759評論 0 2
  • 選擇qi:是表達式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color碧库,font柜与,text-align,li...
    love2013閱讀 2,316評論 0 11
  • ?前端面試題匯總 一嵌灰、HTML和CSS 21 你做的頁面在哪些流覽器測試過弄匕?這些瀏覽器的內(nèi)核分別是什么? ...
    Simon_s閱讀 2,220評論 0 8
  • CSS對瀏覽器的兼容性有時讓人很頭疼,或許當(dāng)你了解當(dāng)中的技巧跟原理,就會覺得也不是難事,從網(wǎng)上收集了IE7,6與F...
    年輕人多學(xué)點閱讀 360評論 0 7