html - 身高：100% 神秘地不工作

Question

我正在围绕 height:100% 进行一些测试。

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

height:100%;

对解决或试图理解这种行为有任何帮助吗？

score 2 · Accepted Answer

设置height: auto在你的body元素上，

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

更新

好的，尽管内容较少，但不知道它需要 100%。

你能做的是，

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

PS：min-height不会工作。您需要在px或中提供高度em。

虽然，我不太确定为什么元素无法计算出 1000 像素的 100% 而不是 100% 的 100%

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

这个想法很清楚，如果你要设置 100% 的高度，你必须问：100% 到底是什么？

答案是家长。

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

在我的小提琴中可以很清楚地看到问题的说明：http: //jsfiddle.net/AVKnJ/

我希望它有点启发。

编辑：

这是理想的行为吗？

您确实必须使用height: 100%容器（html、body）和min-height: 100%您希望超过窗口高度的元素。

3 回答 3