css - 百分比min-height的一個問題
問題描述
直接上代碼吧
<!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元素沒有撐開還是一行字體的高度。
當body設置height而不是min-height為100%時可以實現(xiàn)上述需求，但是為什么？
問題解答
回答1：樓上所有回答設置height:100%的，難道沒看到題主“當body設置height而不是min-height為100%時可以實現(xiàn)上述需求，但是為什么？”這句話嗎？
題主是要問為什么？
我來說說鄙人的理解：
1.height的百分比
當我們給塊元素設置百分比高度時,往往沒能看到效果.因為百分比的大小是相對其最近的父級元素的高的大小,也就是說,其最近的父級元素應該有一個明確的高度值才能使其百分比高度生效.
2.min-height的百分比
設置min-height的元素即使內(nèi)容的高度很少時也能撐開到min-height設置的高度;當內(nèi)容的高度大于min-height時就設置為內(nèi)容的高度.
要使min-height的百分比值生效,其父元素的height值必須為一個固定的高度或者是一個有效的百分比高度.
值得注意的是,父元素設置了有效的min-height但沒有設置height屬性時,子元素的height和min-height的百分比不會生效.因為設置height和min-height必須基于一個設置了固定高度或者是一個有效百分比高度的父元素.
html { height: 100%;}body { min-height: 100%;}#main { background-color: #333; color: #eee; min-height: 100%;}
題主這種多層百分比高度嵌套的風格，應該盡量避免，因為子元素百分比高度基于父元素百分比高度的前提是父元素的父元素必須有一個明確的高度。
補充：不但height如此， width也是一樣。《css權(quán)威指南》指出height width百分數(shù)是相對于包含塊的。《css權(quán)威指南》又指出（P180），如果沒有顯示聲明包含塊的height，百分數(shù)高度會重置為auto，所以上面html 的height設置為任何值都跟設置沒設置一樣。
回答2：設置成height 不能設置min-height
回答3：html,body {
height: 100%; }回答4：
html,body { height: 100%;}回答5：
body和html標簽比較特殊需要都設置height:100%才能使得body內(nèi)的子元素height使用百分比。
相關(guān)文章：
1. macos - mac下docker如何設置代理2. java - 請問在main方法中寫成對象名.屬性（）并賦值，與直接參參數(shù)賦值輸錯誤是什么原因？3. MySQL數(shù)據(jù)庫中文亂碼的原因4. 關(guān)docker hub上有些鏡像的tag被標記““This image has vulnerabilities””5. docker不顯示端口映射呢？6. docker - 各位電腦上有多少個容器啊？容器一多，自己都搞混了，咋辦呢？7. android studio總是在processes running好久8. angular.js - 關(guān)于$apply()9. docker-compose 為何找不到配置文件？10. dockerfile - 我用docker build的時候出現(xiàn)下邊問題 麻煩幫我看一下
網(wǎng)公網(wǎng)安備