直接上代码吧
<!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都已经是100%了也就是说body是有高度的，但是为很么#main元素没有撑开还是一行字体的高度。
当body设置height而不是min-height为100%时可以实现上述需求，但是为什么？
樓上所有答案設定height:100%的，難道沒看到題主「當body設定height而不是min-height為100%時可以實現上述需求，但是為什麼？」這句話嗎？
題主是要問為什麼？
我來說說鄙的理解：
1.height的百分比
當我們為區塊元素設定百分比高度時,往往沒能看到效果.
因為百分比的大小是相對其最近的父級元素的高的大小,也就是說,其最近的父級元素應該有一個明確的高度值才能使其百分比高度生效.
2.min-height的百分比
設定min-height的元素即使內容的高度很少時也能撐開到min-height設定的高度;
當內容的高度大於min-height時就設定為內容的高度.
要使min-height的百分比值生效,其父元素的height值必須為一個固定的高度或是一個有效的百分比高度.
值得注意的是,父元素設定了有效的min-height但沒有設定height屬性時,子元素的height和min-height的百分比不會生效.因為設定height和min-height必須基於一個設定了固定高度或有效百分比高度的父元素.
題主這種多層百分比高度嵌套的風格，應該盡量避免，因為子元素百分比高度基於父元素百分比高度的前提是父元素的父元素必須有一個明確的高度。
補充：
不但height如此， width也是一樣。
《css權威指南》指出height width百分數是相對於包含區塊的。
《css權威指南》又指出（P180），如果沒有顯示宣告包含區塊的height，百分數高度會重設為auto，所以上面html 的height設定為任何值都跟設定沒設定一樣。
設定成height 不能設定min-height
html,正文 {
雷雷雷雷
body和html標籤比較特殊
需要都設定
height:100%才能使得body內的子元素height使用百分比。