A problem of percentage min-height

  css3, question

Code it directly

<!  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>
 <div id="main">
 This is main section
 </div>
 </body>
 </html>

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

In the above code, html and body are already 100%, which means body is high, but why#mainThe element is not stretched or the height of a line of fonts.

WhenbodySet upheightrather thanmin-heightFor100%The above requirements can be realized when the time comes, but why?

If all the answers upstairs are set to height:100%, don’t you see the main question “when body is set to height instead of min-height being 100%, the above requirements can be met, but why?” This sentence?

The main question is why?

Let me talk about my understanding:

1. percentage of 1.height

When we set the percentage height for block elements, we often fail to see the effect.
Because the size of the percentage is higher than that of its nearest parent element, that is, its nearest parent element should have a clear height value in order for its percentage height to take effect.

2. percentage of 2.min-height

Elements that set min-height can be stretched to the height set by min-height even when the height of content is very small.
When the height of the content is greater than min-height, it is set as the height of the content.

For the percentage value of min-height to take effect, the height value of its parent element must be a fixed height or a valid percentage height.

It is worth noting that when the parent element sets a valid min-height but does not set the height attribute, the percentage of height and min-height of the child element will not take effect. Because setting height and min-height must be based on a parent element that sets a fixed height or a valid percentage height.

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

This style of multi-level percentage nesting should be avoided as much as possible, because the percentage height of child elements is based on the percentage height of parent elements. The premise is that the parent elements of parent elements must have a definite height.

Add:
Not only height but also width.
The css Authoritative Guide points out that the percentage of height width is relative to the inclusion block.
The css Authoritative Guide also points out (P180) that if the height of the declared inclusion block is not displayed, the percentage height will be reset to auto, so setting the height of html above to any value is the same as setting it without setting it.