What\'s the difference between `height: 100%` and `min-height: 100%` when setting a div\'s height in CSS?

Height:100% vs. Min-Height:100%

Question:

When setting a div's height using CSS, what is the distinction between "height:100%" and "min-height:100%"?

Answer:

The World Wide Web Consortium (W3C) defines the relationship between these two properties as follows:

1. The initial height of the div is determined without considering "min-height" and "max-height."
2. If the initial height exceeds "max-height," recalculate the height using "max-height" as the computed height.
3. Conversely, if the resulting height is less than "min-height," recalculate the height using "min-height" as the computed height.

Summary:

• "Min-height" will override the computed height if it is greater, regardless of the specified height.
• "Max-height" can overrule the specified height if it is less, but it cannot overrule "min-height."

Specific Case:

• "Height:100%" sets the element's height equal to the containing block's height.
• "Min-height:100%" ensures that the height is at least 100%, even if a lower height is explicitly specified. Note that it cannot be overridden by "max-height."

The above is the detailed content of What\'s the difference between `height: 100%` and `min-height: 100%` when setting a div\'s height in CSS?. For more information, please follow other related articles on the PHP Chinese website!