身高：100％VS身高：自动

Question

我想了解以下

1. 身高：自动;这是做什么的？
2. 身高：100％;这是做什么的？
3. 1和2之间有什么区别？有什么例子来解释这种差异吗？

提前致谢！

Answer 1

height: auto;表示，元素的height会根据其保留的内容而增加，如果您指定固定的height，则内容会溢出，所以当您不这样做时知道您的元素将包含多少，您将其设置为auto，因此height会auto增加。

当您设置height: 100%;以便它将占用容器元素的整个垂直空间时，例如，当容器元素的高度为200px时，您使用height: 100%;子元素，它将是容器元素的height: 100%; = 200px。

默认情况下，除非您使用height auto或任其他单位。

Demo（height）继续添加内容，您的元素将垂直展开。

Demo 2（px），这就像你为你的元素设置一些固定的%一样，如果内容增加，它将height: auto;。只有在您希望子元素占用父容器的100％垂直空间时，此方法才会派上用场。

Answer 2

1.   

   height:100%：暗示元素的父容器的高度为100％。

2.   

   height:auto：意思是，元素将具有灵活的高度，即其高度将取决于子元素的高度

3. Click here for difference with code

Answer 3

参考：http://www.w3.org/TR/CSS2/visudet.html#the-height-property

内容高度：'height'属性

  <percentage>

  

指定百分比高度。百分比用计算   相对于生成的框的包含块的高度。如果   未明确指定包含块的高度（即，它   取决于内容高度），这个元素不是绝对的   定位后，该值计算为“auto”。高度的百分比   根元素相对于初始包含块。注意：对于   绝对定位的元素，其包含块基于a   块级元素，百分比是相对于   该元素的填充框的高度。这是CSS1的变化，   其中百分比总是根据内容计算   父元素的框。

auto

  

高度取决于其他属性的值。看散文   下面。       请注意，绝对定位元素的包含块的高度与元素本身的大小无关，   因此，这种元素的百分比高度总是如此   解决。然而，可能直到之后才知道高度   已经处理了文档后面的元素。

     

“身高”的负值是非法的。

例如，以下规则将段落的内容高度设置为100像素：

p { height: 100px }

  

内容的高度超过100像素的段落   根据'溢出'属性溢出。