成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置：首頁技術(shù)文章
文章詳情頁

css - 百分比min-height的一個(gè)問題

瀏覽：127日期：2023-07-14 15:40:11

問題描述

直接上代碼吧

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <style>* { margin: 0; padding: 0;}html { height: 100%;}body { min-height: 100%;}#main { background-color: #333; color: #eee; min-height: 100%;} </style></head><body><p id='main'> This is main section</p></body></html>

https://jsfiddle.net/yaxin/rj7Ljwyx/

上面的代碼中，html和body都已經(jīng)是100%了也就是說body是有高度的，但是為很么#main元素沒有撐開還是一行字體的高度。

當(dāng)body設(shè)置height而不是min-height為100%時(shí)可以實(shí)現(xiàn)上述需求，但是為什么？

問題解答

回答1：

樓上所有回答設(shè)置height:100%的，難道沒看到題主“當(dāng)body設(shè)置height而不是min-height為100%時(shí)可以實(shí)現(xiàn)上述需求，但是為什么？”這句話嗎？

題主是要問為什么？

我來說說鄙人的理解：

1.height的百分比

當(dāng)我們給塊元素設(shè)置百分比高度時(shí),往往沒能看到效果.因?yàn)榘俜直鹊拇笮∈窍鄬ζ渥罱母讣壴氐母叩拇笮?也就是說,其最近的父級元素應(yīng)該有一個(gè)明確的高度值才能使其百分比高度生效.

2.min-height的百分比

設(shè)置min-height的元素即使內(nèi)容的高度很少時(shí)也能撐開到min-height設(shè)置的高度;當(dāng)內(nèi)容的高度大于min-height時(shí)就設(shè)置為內(nèi)容的高度.

要使min-height的百分比值生效,其父元素的height值必須為一個(gè)固定的高度或者是一個(gè)有效的百分比高度.

值得注意的是,父元素設(shè)置了有效的min-height但沒有設(shè)置height屬性時(shí),子元素的height和min-height的百分比不會生效.因?yàn)樵O(shè)置height和min-height必須基于一個(gè)設(shè)置了固定高度或者是一個(gè)有效百分比高度的父元素.

html { height: 100%;}body { min-height: 100%;}#main { background-color: #333; color: #eee; min-height: 100%;}

題主這種多層百分比高度嵌套的風(fēng)格，應(yīng)該盡量避免，因?yàn)樽釉匕俜直雀叨然诟冈匕俜直雀叨鹊那疤崾歉冈氐母冈乇仨氂幸粋€(gè)明確的高度。

補(bǔ)充：不但height如此， width也是一樣。《css權(quán)威指南》指出height width百分?jǐn)?shù)是相對于包含塊的。《css權(quán)威指南》又指出（P180），如果沒有顯示聲明包含塊的height，百分?jǐn)?shù)高度會重置為auto，所以上面html 的height設(shè)置為任何值都跟設(shè)置沒設(shè)置一樣。

回答2：

設(shè)置成height 不能設(shè)置min-height

回答3：

html,body {

height: 100%; }回答4：

html,body { height: 100%;}回答5：

body和html標(biāo)簽比較特殊需要都設(shè)置height:100%才能使得body內(nèi)的子元素height使用百分比。

標(biāo)簽： CSS
相關(guān)文章：