11

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

<div style='height:100%'>

100%有多高？100% 什么？

[编辑]

追问：如果100%代表父级的高度，但是父级是<body>，除了div的高度外没有其他高度，那是什么意思？它似乎是递归定义的。

4

4 回答 4

8

父容器高度的 100%。

见这里：http: //jsfiddle.net/6VRn6/

如果要使用这种方法使 div 为页面高度的 100%，则必须将高度指定为 body 和 html 的 100%。

body, html {
  height: 100%;
}

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

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

于 2012-06-22T15:47:59.420 回答
5

100% 的offsetParent。在大多数情况下，这就是文档。它也可以是具有position以外的元素static，或者是表格的组成部分。

于 2012-06-22T15:47:26.150 回答
2

height:100% 意味着：让那个 div 像父级一样大！

于 2012-06-22T15:47:58.997 回答
0

它只是意味着 100% 的divorclass或tag它包含在其中。试着有一个想法：

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

于 2012-06-22T16:12:08.127 回答