CSS高度之间的差异：100％与高度：自动答案

【问题标题】：difference between css height : 100% vs height : autoCSS高度之间的差异：100％与高度：自动
【发布时间】：2013-04-03 07:22:34
【问题描述】：

我在一次采访中被问到一个问题“height:100% 和 height:auto 之间的 css 有什么区别？”

谁能解释一下？

【问题讨论】：

标签： css

【解决方案1】：

height: 100% 将元素的高度设为其父容器的 100%。

height: auto 表示元素高度将取决于其子元素的高度。

考虑以下示例：

身高：100%

<div style="height: 50px">
    <div id="innerDiv" style="height: 100%">
    </div>
</div>

#innerDiv 将拥有height: 50px

高度：自动

<div style="height: 50px">
    <div id="innerDiv" style="height: auto">
          <div id="evenInner" style="height: 10px">
          </div>
    </div>
</div>

#innerDiv 将拥有height: 10px

【讨论】：

我认为在 'height:auto #innerDiv 的情况下将是10px + the size it needs for its own content - 请参阅此jsfiddle
@Manish Mishra：最好的响应式设计是什么？设置子元素或容器元素的高度，让对方推导出其高度？
我认为考虑汽车的一个好方法是您正在“取消设置”高度 - 就像没有设置它一样。
我修改了上面 BornToCode 共享的小提琴，以使auto 使元素增长以适应其内容及其子内容的更明显。相比之下，固定高度值不会增长（或显示）不适合声明高度的内容。jsfiddle.net/m3f8y6xr/1我相信这个答案的措辞不够明确，元素将增长以包含所有内容，无论是否它是它自己的文本，或者是孩子的内容。当然可以说它自己的文本也是一个孩子。这提供了行为的视觉确认。

【解决方案2】：

100% 的高度大概是您的浏览器内部窗口的高度，因为那是其父级的高度 ，这页纸。 auto 高度 将是必须包含的最小高度。

【讨论】：

如果父元素是一个定义的高度不适合浏览器窗口大小的元素，这不一定是正确的

【解决方案3】：

height:100% 如果父容器具有指定的 height 属性则有效，否则无效

【讨论】：

【解决方案4】：

在浏览器中默认为height: auto，但height: X%定义了包含块的高度百分比。

【讨论】：