高度:100% VS最小高度:100%

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

我使用此css将

设置为最大高度

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

有没有人能给我一个大概的答案，100%和100%之间的区别是什么?

4 个解决方案

#1

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

以下是W3C的解释(链接):

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).

对于您给出的特定情况，指定高度:100%使元素的高度等于包含块的高度。(但是，这可能被潜在地否决，例如如果您还指定了max-height:50%)。指定最小高度:100%意味着如果计算的高度小于100%，事实上，即使显式指定的高度小于100%，也会被视为您说的高度:100%。注意，最大高度的一个关键区别是，最大高度可以覆盖高度，但不能覆盖最小高度(因为根据上面引用的W3C推荐标准，最大高度是在高度之后，而在最小高度之前)。

#2

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

高度:100%达到集装箱高度的100%;最小高度:如果需要，100%应该超过容器的高度。

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

请记住，IE中不支持min-height。

#3

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.

当主div为空时，红色会粘在视图端口的底部，当您用内容填充主div时，红色的页脚仍然粘在页面的底部。

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%.

为了说明这一点，如果您只是在主div上使用高度:100%，并用内容填充它，红色页脚将悬浮在viewport的底部。指定为100%的高度不会像声明高度:auto时那样将主div扩展到viewport边界之外;最小高度:100%。

#4

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

高度将使元素的大小达到其容器的100%。

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

最小高度将使元素达到容器大小的100%

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

但是你为什么要这么做呢?如果我的身高是100%，我认为不会有任何影响……

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

在IE7的一些研究之后，它可能会给你一个解决问题的方法:

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

#1