Question

我正在围绕身高进行一些测试：100％。

在THIS页面上，您可以注意到蓝色区域不会随页面内容拉伸其高度，即使它被指定为CSS样式：

height:100%;

有关解决或尝试理解此行为的任何帮助吗？

Answer 1

在height: auto元素

上设置body

body {
  width: 100%;
  font-family: sans-serif;
  height: auto;
}

<强>更新

好的，虽然内容较少，但并不知道它需要100％。

你能做的是，

给你的身体一些高度（比如1000px）。然后，section上的100％将扩展到1000px。

PS：min-height不起作用。您需要提供px或em的高度。

虽然，我不太确定为什么元素无法找出100％的1000px而不是100％的100％

Answer 2

如果您希望该部分始终为100％高度，则可以使用min-height: 100%代替height: 100%。如果没有，你必须给父母一个高度（比如html），然后使用height: 100%。

Answer 3

行为背后的理论是，如果你想要一个元素填充窗口的100％高度，你必须确保这个元素的父元素也填充100％的浏览器窗口。

这个想法很清楚，如果你设定100％的高度，你必须问：100％究竟是什么？

答案是父母的答案。

当然，这适用于没有position: absolute或position: fixed的元素，这些元素不在文档的“流程”中。

在我的小提琴中可以清楚地看到问题的一个例子：http://jsfiddle.net/AVKnJ/

我希望它有点启发。

编辑：

这是理想的行为吗？

你确实必须使用height: 100%表示容器（html，body）和min-height: 100%表示你希望超出窗口高度的元素。