height:100% VS min-height:100%

37
votes

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

Can anyone give me a general answer, what's the difference between height: 100% and min-height: 100% ?

4
css
fyi min-height is not supported by all browsers – marcgg
Only if you mark IE<=6 as a browser. Anything beyond that just supports it. – BalusC

4 Answers

39
votes

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

The following algorithm describes how the two properties [min-height and max-height] influence the used value of the 'height' property:
The tentative used height is calculated (without 'min-height' and 'max-height') following the rules under "Calculating heights and margins" above.
If this tentative height is greater than 'max-height', the rules above are applied again, but this time using the value of 'max-height' as the computed value for 'height'.
If the resulting height is smaller than 'min-height', the rules above are applied again, but this time using the value of 'min-height' as the computed value for 'height'.

To summarize: Basically, if the min-height is greater than what the height would otherwise be (whether an explicit height is specified or not), then the min-height is used as the height. If the min-height is less than what the height would otherwise be, then the min-height has no effect.

For the specific case you give, specifying height:100% makes the height of the element equal to the height of the containing block. (However this could potentially be overruled, for instance if you also specified max-height:50%.) Specifying min-height:100% means that if the computed height is less than 100%, in fact even if you explicitly specified a height less than 100%, it is treated as if you said height:100%. Note that one key difference is that max-height can overrule height but cannot overrule min-height (because max-height is considered after height but before min-height according to the W3C recommendation as quoted above).

15
votes

height: 100% will go to 100% of the container height; min-height: 100% should expand past the container's height if it needs too.

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

7
votes

The only practical use I've seen of min-height is sticking a footer to 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>

The red is stuck to the bottom of the view port when the main div is empty, and as you fill the main div with content, the red footer still sticks to the bottom of the page.

To illustrate the point, if you just use height: 100% on the main div and fill it up with content, the red footer will hover at the bottom of the viewport. The height specified as 100% doesn't expand the main div outside the bounds of the viewport like it will if you declare height: auto; min-height: 100%.

1
votes

height will put your element to a size of 100% of it's container.

min-height will put the element to min 100% of the container size

but why would you want to do that anyway? if min-height is 100% it will not have any effect in my opinion...

after some research in IE7 it might give you a solution to a problem:

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