给 div 一个 style='height:100%' 是什么意思？答案

【问题标题】：What does it mean to give a div a style='height:100%'?给 div 一个 style='height:100%' 是什么意思？
【发布时间】：2012-06-24 22:57:13
【问题描述】：

与此相关的SO问题很多，但我扫描的都是针对具体情况的详细问题。我想知道的是，在概念层面上，这意味着什么：

<div style='height:100%'>

100% 有多高？ 100% 什么？

[编辑]

追问：如果100%代表父级的高度，但是父级是

，除了div的高度外没有其他高度，那是什么意思？它似乎是递归定义的。

【问题讨论】：

标签： html css

【解决方案1】：

父容器高度的 100%。

请看这里：http://jsfiddle.net/6VRn6/

如果你想用这个方法让div达到页面高度的100%，你必须指定高度为body和html的100%。

body, html {
  height: 100%;
}

当您不指定html 或body 高度时，它们的高度是其中元素高度的总和。

Updated demo 显示这个。我们有一个 200 像素的 div，边框为 2 像素，总共 204 像素，然后是一个 40 像素的状态 div。 body 高度应为 244 像素。现在，如果将上面的 CSS 添加到页面，高度将是 jsfiddle 右下象限的高度。尝试添加它并再次运行代码。然后调整结果窗格的大小并再次运行它以查看相应的高度变化。

【讨论】：

【解决方案2】：

offsetParent 的 100%。在大多数情况下，这就是文档。它也可以是position 而非static 的元素，或表格的组件。

【讨论】：

那么，文档的高度是多少，没有另外指定，假设 div 中有一堆随机元素？ 100% 没有任何意义吗？
我猜它是页面加载时窗口的高度，但我不确定。我不使用这种可疑的 CSS ;)
@ScottStafford body 的高度将是其中元素的高度。在我的示例中（在我的解决方案中），我有一个带有 2px 边框的框。 $("body").height() 返回204（顶部/底部为 200px + 2px * 2）
@sachleen：那么基本上 div 上的 100% 是没有意义的。这是有道理的。
从这个意义上说，是的，因为 body 的高度就是 div 的高度。但是，如果您为body 指定高度，那么它会很有用。

【解决方案3】：

高度：100% 表示：让那个 div 像父级一样大！

【讨论】：

【解决方案4】：

它只是表示 100% 的 div 或 class 或 tag 包含在其中。试着有这样的想法：

{--parent loop { ..height 100% of above loop .. } }

【讨论】：