Best IT Recipes

Height: 100% VS min-height: 100%

I use this css to set the <div> maximum height

Can someone give me a general answer, what is the difference between height: 100% and min-height: 100% ?

+25
css
Feb 26 '10 at 13:19
source share
4 answers

Here's an explanation from the W3C ( link ):

The following algorithm describes how the two [min-height and max-height] properties affect the used value of the height property:
The estimated usable height is calculated (without "min-height" and "max-height"), following the rules in the "Computing Height and Margins" section above.
If this preliminary height is greater than "max-height", the above rules apply again, but this time use the value of "max-height" as the calculated value for "height".
If the resulting height is less than "min-height", the above rules apply again, but this time using the value of "min-height" as the calculated value for "height".

To summarize: In principle, if the minimum height is greater than the height otherwise (whether explicit height is specified or not), then the minimum height is used as the height. If the minimum height is less than the height otherwise, the minimum height has no effect .

For the specific case that you are specifying, indicating height:100% makes the element's height equal to the height of the containing block. (However, this could potentially be undone, for example, if you also specified max-height:50% .) Specifying min-height:100% means that if the calculated height is less than 100%, in fact, even if you explicitly specified a height of less than 100%, this is processed as if you said height:100% . Please note that one key difference is that the maximum height can exceed the height, but cannot cancel the minimum height (since the maximum height is taken into account after the height, but to the minimum height in accordance with the W3C recommendation, as described above).

+23
Feb 26 '10 at 13:34
source share

height: 100% will go up to 100% of the container height; min-height: 100% must exceed the height of the container, if necessary.

Keep in mind that min-height is not supported in IE.

+10
Feb 26 '10 at 13:23
source share

The only practical use I've seen in min-height is to stick to the footer at the bottom of the page. Consider the following code:

 <html> <head></head> <body style="height: 100%"> <div style="height: 100%"> <div style="height: auto; min-height: 100%; background-color: blue;"> <div class="main" style="padding-bottom: 300px;"> </div> </div> <div class="footer" style="height: 300px; background-color: red; margin-top: -300px;"></div> </div> </body> </html>

Red is stuck at the bottom of the view port when the main div is empty, and when you fill the main div with content, the red footer still remains at the bottom of the page.

To illustrate this point, if you just use the height: 100% on the main div and fill it with content, the red footer will hover at the bottom of the viewport. The height specified as 100% does not extend the main div outside the viewport, as if you had declared the height: auto; min-height: 100%.

+7
Feb 26 '10 at 15:25
source share

height will add your element to the size of 100% of its container.

min-height puts the element at min 100% of the container size

but why do you have to do this? if min-height is 100%, this will not have any effect in my opinion ...

after some research in IE7, it can give you a solution to the problem:

http://www.search-this.com/2007/02/05/css-min-height-explained/

+1
Feb 26 '10 at 13:22
source share


More articles:


All Articles