高度：100% VS 高度：自动 [重复]答案

【问题标题】：Height: 100% VS Height:auto [duplicate]高度：100% VS 高度：自动 [重复]
【发布时间】：2013-10-18 13:50:14
【问题描述】：

我正在尝试理解以下内容

高度：自动；这是做什么的？
高度：100%；这是做什么的？
1 和 2 之间有什么区别？有什么例子可以解释差异吗？

提前致谢！

【问题讨论】：

这个问题应该被关闭。 “一般参考”

标签： html css

【解决方案1】：

height: auto; 表示，元素的height 会根据它所拥有的内容而增加，如果你分配固定的height，内容就会溢出，所以当你不知道你的元素将包含如何很多，你把它设置为auto，所以height会增加auto。

当你设置height: 100%;，它会占用容器元素的整个垂直空间，比如说，当容器元素的高度是200px，而你在子元素上使用height: 100%;，它会是容器元素的height: 100%; = 200px。

默认情况下，元素的height 始终设置为auto，除非您使用px % 或任何其他单位指定height。

Demo (height: auto;) 继续添加内容，您的元素将垂直扩展。

Demo 2 (height: 100%;)，这就像你为你的元素设置了一些固定的height，如果内容增加，它会overflow。此方法仅在您希望子元素占用父容器 100% 的垂直空间时才派上用场。

【讨论】：

【解决方案2】：

height:100%: 表示该元素将具有其父容器的 100% 高度。
height:auto: 意味着，元素将具有灵活的高度，即它的高度将取决于它的子元素的高度
Click here for difference with code

【讨论】：

例如，如果我将margin:5px 添加到带有height:100px 的div 中，它将超出其界限并达到105px。使用height:auto，它会将 5px 的边距移出高度，保持在 100px。

【解决方案3】：

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

内容高度：'height' 属性

  <percentage>

指定百分比高度。百分比计算如下相对于生成框的包含块的高度。如果包含块的高度没有明确指定（即，它取决于内容高度），并且这个元素不是绝对的定位时，该值计算为“自动”。百分比高度根元素相对于初始包含块。注：对于绝对定位元素，其包含块基于块级元素，百分比是相对于该元素的填充框的高度。这是从 CSS1 的变化，其中百分比始终是根据内容计算的父元素的框。

auto

高度取决于其他属性的值。看散文以下。请注意，绝对定位元素的包含块的高度与元素本身的大小无关，因此，此类元素的百分比高度始终可以是解决。但是，可能直到高度才知道文档中稍后出现的元素已被处理。

'height' 的负值是非法的。

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

p { height: 100px }

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

【讨论】：